Angular 2 with TypeScript Configuration
Set up and configure an application with Angular 2 and TypeScript.
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.
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.
Using a Content Delivery Network
Source Code Highlighting
In the text below, when you see a word or phrase, click on it to highlight the relevant bits of the source code.
are polyfills for Angular itself.
The main thing to notice here is that the scripts are being loaded from the
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.
systemjs.config.js file is used to configure SystemJS for our Angular application.
npm: prefix at the start of each package name has been set to
https://unpkg.com/ in the
paths section, which instructs SystemJS
to load these modules from the CDN.
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.
We install the node packages by running this command in the project root:
This will install all the required dependencies in the local
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.
In either case, this
tsconfig.json file in the root directory
is used to configure the TypeScript compiler.
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:
This option will automatically re-compile the TypeScript files as they are updated.
The result will look something like this.
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
Compiling TypeScript in the Browser
As an alternative to compiling locally, we can download the
.ts files from the server
To do this, we need to make a few changes to our
First we add the
libraries to the
Then we set
transpiler to '
ts' which tells SystemJS to use
plugin-typescript as the default transpiler.
that configuration options are taken from
tsconfig.json when the TypeScript is compiled.
Finally, in the
app property of
to use the
.ts versions of the source files.
For more information about plugin-typescript see this github repo.
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.
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
- Input Binding - bind to
<input>fields such as
- Built-in Directives - see how to use built-in directives
- The Angular Quick Start Source from angular.io.
- SystemJS github repo to learn more about the SystemJS universal dynamic module loader.
- SystemJS Configuration API to help you understand SystemJS configuration.
- TypeScript configuration with the TypeScript compiler options which can be used on the command line or using the tsconfig.json file.
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.