Angular 2 with TypeScript Configuration - Loading..
Style: Blog or IDE

Angular 2 with TypeScript Configuration

Set up and configure an application with Angular 2 and TypeScript.

Last updated Jan 2017, Angular version 2.4.x

widescreen Take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.

Show me the IDE style

We're going to look at a couple ways to configure Angular with TypeScript.

First we'll load resources from a content delivery network (CDN), then switch to using node package manager to create the required dependencies for our application.

Then we'll see how to compile the TypeScript into JavaScript during development, and finally how to compile the TypeScript in the browser at runtime.

Using a Content Delivery Network

Source Code Highlighting

widescreen In the text below, when you see a word or phrase with this color, click on it to highlight the relevant bits of the source code.

We add the JavaScript files highlighted in the source code to index.html.

shim.min.js is a polyfill for older browsers which monkey patches the global context (window) with essential ES6 features. zone.js and reflect-metadata.js are polyfills for Angular itself.

SystemJS is our module loader which is configured using systemjs.config.js. We'll take a look at this file next.

The main thing to notice here is that the scripts are being loaded from the unpkg content delivery network.

index.html x

Project Files


Use the symbol next to the source code to explore the project files.

Better still, if you have a wide screen, switch to the IDE style to get more information on the page.

Show me the IDE style


The systemjs.config.js file is used to configure SystemJS for our Angular application.

We create a map to tell SystemJS where to look when we import a module. For example, any modules imported from @angular/forms will be loaded from npm:@angular/forms/bundles/forms.umd.js.

Importantly, the npm: prefix at the start of each package name has been set to in the paths section, which instructs SystemJS to load these modules from the CDN.

systemjs.config.js x


For more information about the settings in this file see SystemJS Configuration API, or for more information about SystemJS in general see the SystemJS github repo.

Node Packages

As an alternative to fetching our resources from a CDN, we can include them as part of the application and serve them up from our web server. But to do this we must download and install the relevant modules using the node package manager (NPM).

Node Package Manager

In the project root, we add this package.json file to specify the dependencies for our application.

package.json x

We install the node packages by running this command in the project root:

npm install

This will install all the required dependencies in the local node_modules folder (including TypeScript).


If you are not familiar with Node.js and npm see the npm docs.

Using Node Packages

To use the node packages in our application, we change index.html and the systemjs.config.js to use node_modules rather than the CDN.

index.html x
systemjs.config.js x


Now let's switch our attention to TypeScript. We can compile the TypeScript source files into JavaScript either during development or in the browser at runtime.

In either case, this tsconfig.json file in the root directory is used to configure the TypeScript compiler.

tsconfig.json x


For general information about the tsconfig.json file see the official TypeScript Wiki. For details about the options that can be specified in this file see the TypeScript compiler options.

Compiling TypeScript During Development

If you don't already have TypeScript, you can install it globally with this command:

npm install -g typescript

To compile the TypeScript locally during development, we can either use a TypeScript-aware IDE such as WebStorm, Visual Studio Code or Sublime Text to compile the TypeScript automatically, or use the following command to run the TypeScript compiler:


Or we can use this command to run the TypeScript compiler in watch mode:

tsc --watch

This option will automatically re-compile the TypeScript files as they are updated.

The result will look something like this.

main.js x

Loading JavaScript Files with SystemJS

Because we have already transpiled the TypeScript to JavaScript locally, we can load the JavaScript directly into the browser at runtime.

In the packages section of systemjs.config.js, we tell SystemJS to start with the main.js file and to load all the other files using a default extension of .js.

systemjs.config.js x

Compiling TypeScript in the Browser

As an alternative to compiling locally, we can download the .ts files from the server and transpile the TypeScript to JavaScript in the browser. To do this, we need to make a few changes to our systemjs.config.js file.

First we add the typescript and plugin-typescript libraries to the map option.

Then we set transpiler to 'ts' which tells SystemJS to use plugin-typescript as the default transpiler. In typescriptOptions, setting tsconfig to true ensures that configuration options are taken from tsconfig.json when the TypeScript is compiled.

Finally, in the app property of packages, we change main and defaultExtension to use the .ts versions of the source files.

systemjs.config.js x


For more information about plugin-typescript see this github repo.

Where Next?

Try the Angular 2 with TypeScript Tutorial.

Create custom elements with Angular 2 and TypeScript. This tutorial covers components, template syntax, property binding, event binding, bootstrapping and more.

More Tutorials

If you want to dive a little deeper into Angular 2 and TypeScript, check out these tutorials:

  • Templates - introduction to inline and external templates.
  • Interpolation - use curly braces and template expressions to output data on the page.
  • Property Binding - bind to DOM properties using square brackets and template expressions.
  • Event Binding - handle DOM events using parentheses and template statements.
  • Two-way Binding - combine property and event binding to create two-way binding with ngModel.
  • Input Binding - bind to <input> fields such as text, textarea, checkbox, radio and select.
  • Built-in Directives - see how to use built-in directives ngIf, ngSwitch, ngFor, ngClass and ngStyle.


Source Code

The source code for this tutorial is available on plunker, and in the angular-2-block-counter (master branch) GitHub repo for the node packages version, and angular-2-block-counter (cdn branch) for the CDN version.