TypeScript - Promise only refers to a type, but is being used as a value

When using Promise in TypeScript code and transpiling, it generates the error:

'Promise' only refers to a type, but is being used as a value here. 
Do you need to change your target library? 
Try changing the 'lib' compiler option to es2015 or later

There could be following reasons/fixes for this issue:

• Check in tsconfig.json file, if the target property (under compilerOptions) is set to es2015 or later (as suggested in the error message).

  {
      "compilerOptions": {
          "target": "es2015",
      }
  }
  

• In tsconfig.json file, add lib property (under compilerOptions), and set it values to es2015 or later.

  {
      "compilerOptions": {
          "target": "es2015",
          "lib": ["dom", "es2015", "es5", "es6"],
      }
  }
  

• A quick work around for this error is just removing the type check for Promise, rather than fixing it. Declar the Promise as a variable with type any.

  declare var Promise: any;
  

• Try to install @types/node from npm;

  npm instal @types/node
  

• Please be aware that if you are running the tsc command with a file name, then the compiler will ignore the tsconfig.json file. For example, transpiling the file like this:

  tsc myfile.ts
  

  You can edit the tsconfig.json to include a set of files with files property, e.g:

  {
      "compilerOptions": {
          "module": "commonjs",
          "noImplicitAny": true,
          "removeComments": true,
          "preserveConstEnums": true,
          "sourceMap": true,
          "target": "es2015",
          "lib": ["dom", "es2015", "es5", "es6"],
      },
      "files": [
          "myfile.ts",
          "service1.ts",
          "common.ts",
          "util.ts",
      ]
  }
  

What is the purpose of using tsconfig.json file ?

tsconfig.json file allows you to point the root level files and different compiler options to setup that require to compile a TypeScript based projects. The existence of this file in a project specifies that the given directory is the TypeScript project folder root.

Here is an example tsconfig.json file.

{
"compileOnSave": true,
"compilerOptions": {
        "target": "es5",
		"module": "system",
		"moduleResolution": "node",
		"noImplicitAny": true,
		"sourceMap": true,
        "removeComments": false
},
	"files": [
		"program.ts",
		"sys.ts"
	],
	"include": [
		"src/**/*"
	],
	"exclude": [
		"node_modules",
		"src/**/*.spec.ts"
	]
}

Lets understand what each option specifies:

• compileOnSave: If sets true, it instructs the IDE to automatically compile the given TypeScript files and generate the output.
• compilerOptions: It allows specifying additional options to the TypeScript compiler:
  • target: the language used for the compiled output, e.g. es5, es6.
  • module: the module manager used in the compiled output. system is for SystemJS, commonjs for CommonJS.
  • moduleResolution: the strategy used to resolve module declaration files (.d.ts files). With the node approach, they are loaded from the node_modules folder like a module (require('module-name'))
  • noImplicitAny: if sets false, Raise error on expressions and declarations with an implied any type.
  • sourceMap: if sets true, it will generate source map files to debug directly your application TypeScript files in the browser,
  • removeComments: if set, Remove all comments except copy-right header comments beginning with /*!
• files: Gives a list of TypeScript files that will be included by the compiler. The URL of the files can be both relative or absolute.
• include: Allows you to include a list of TypeScript files using the glob wildcards pattern.
• exclude: Allows you to exclude a list of TypeScript files using the glob wildcards pattern.

Install TypeScript compiler in VS Code

If you need to run the typescript from VS Code terminal you need to install the typescript compiler either globally or in your workspace.

This typescript compiler will transpile the TypeScript code to JavaScript.

Following are the steps we need to install and compile TypeScript in VS Code.

• Install node.js Package Manager (npm).
• Install TypeScript globally (-g) by this command:

  npm install -g typescript
  

• If want to install TypeScript locally in a single project, you can use this command:

  npm install --save-dev typescript
  

• Test your install by checking the version.

  tsc --version
  

TypeScript HelloWorld:

Let's start with a simple Hello World example. Create a new folder HelloWorld and open in VS Code.

mkdir HelloWorld
cd HelloWorld
code .

Create a new file called helloworld.ts.

Add the following TypeScript code in helloworld.ts file.

let message: string = 'Hello World';
console.log(message);

To compile the TypeScript code, you can open the Integrated Terminal (Ctrl+`)

Run this command to compile helloworld.ts

tsc helloworld.ts

It will create a new helloworld.js JavaScript file in the same folder.

To run the javascript file, you can use this command:

node helloworld.js

It will run the javascript code and display the script output in console.

How to change angular port from 4200 to other

You might be using ng serve command to build and run the Angular project. By default it is using the port 4200. After successfull build you can access the application in the browser by visiting the link

	http://localhost:4200/

If you need to work on more than one application simultaneously, then the second application will not work, because the port will already be in use by the first application. Or there may the scenario where you just want to run the application on the port other than the default one.

Following are the ways you can use different port when building the angular application.

1. You can specify the port each time when running ng serve command from the terminal using --port argument. Like this:

   	ng serve --port 4201
   

2. For legacy applications, where you have angular-cli.json file. In this file you can specify the port in the defaults:

   	"defaults": {
   	  "serve": {
   		"port": 4201
   	  }
   	}
   

3. For newer applications (@angular/cli@9.x and over), you can use angular.json file to specify a port per project

   	"projects": {
   		"myproject1": {
   			... (rest of project config settings)
   			"architect": {
   				"serve": {
   					"options": {
   						"port": 4201
   					}
   				}
   			}
   		}
   	}
   

Running my first Angular project from Visual Studio Code

In this post I will explain how to setup the environment for Angular by listing the steps I have setup my first Angular project with Visual Studio Code. I start with a sample project downloaded from GitHub project Angular-GettingStarted by Deborah Kurata. Lets follow these steps:

• Download and install Visual Studio Code from https://code.visualstudio.com/
• In order to install required packages we will use npm (Node Package Manager). So download and install npm from https://nodejs.org/en/download/.
• Download and extract the project from github.
• From VS Code terminal, check if you have successfully installed npm by issuing simple command like npm -v. It will give you installed npm version number, like 6.4.1
• Issue the following command from VS Code terminal to install Angular CLI.

      npm install -g @angular/cli
     

  After installing Angular CLI we have to setup following two directory paths in Environment PATH variable.
  • C:\Users\YOUR-USER\AppData\Roaming\npm
  • C:\Users\YOUR-USER\AppData\Roaming\npm\node_modules\@angular\cli\bin
• Run following command to install dev dependency package introduced in Angular 6.0

     npm install --save-dev @angular-devkit/build-angular
    

• Now you can run the project by issuing the npm start command.

      npm start
     

  After successful compilation, it will open the website with the default browser window on localhost.

We have setup the development environment for Angular. I hope this helps some of you who get stuck with a similar problem.