New York City residents often say “It’s going to be a nice city when all the constructions will be finished”. The same applies to Angular 2 framework, which remains in Alpha (the latest build is 42 at the time of this writing). It has a potential to become a great framework in 2016, when the API will be stabilized and documented.
Writing code in Angular 2 is a lot simpler than in AngularJS, especially if you use TypeScript (see my blog on why writing in TypeScript here). But getting started with a new project is more complicated and requires a careful selection of tooling. in addition to a typical JavaScript project you need to take care of transpiling TypeScript and loading modules – neither of these steps can be done natively by the browsers. Hence you need introduce tooling into your develop-deploy process. For reasoning of using TypeScript read this blog.
Earlier this year I wrote a blog that included a scary list of tools that today’s JavaScript developers may use. In an effort of minimizing the number of required tool we settled on npm (for both installing packages and build scripts) and JSPM (a package manager that comes with the module loader SystemJS that comes with TypeScript transpiler). These are the steps that should be done before you start writing your Angular 2 app in TypeScript:
In the command window run the following npm command (install Node.js runtime if you don’t have npm):
1. Install JSPM globally on your computer (-g means global). It comes with SystemJS:
npm install jspm -g
2. Create a folder for your project, go there and ask jspm to generate all required configuration files:
jspm init
This command will ask you 8 question regarding the required configuration. Accept the defaults for the first 7 questions, but for the question about transpiler, enter typescript. After running this command in your folder you’ll find the new files config.js and package.json as well as the subfolder jspm_packages.
3. Install Angular 2 in your project folder and all required dependencies:
jspm install angular2 core-js css reflect-metadata
This command will download all of the above libraries inside the folder jspm_packages and will modify the content of the file config.js
4. Install an http server that will be serving your app to the browser:
npm install http-server -g
5. Create the file index.html with the following content:
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.rawgit.com/systemjs/systemjs/0.19.4/dist/system.js"></script>
<script src="//code.angularjs.org/2.0.0-alpha.40/angular2.js"></script>
<script>
System.config({
transpiler: 'typescript',
map: {typescript: '//cdn.rawgit.com/Microsoft/TypeScript/v1.6.2/lib/typescript.js'}
});
System.import('main.ts');
</script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
This code loads SystemJS and Angular (I used the build Alpha 40) and tells SystemJS to load the TypeScript 1.6.2 compiler from CDN, and load the file main.ts , which is shown next.
6. The Typescript file main.ts is your entry point to the application. It can import other files, but this would be a subject for a separate blog post. This is what you should enter in main.ts:
import {Component, bootstrap} from 'angular2/angular2';
@Component({
selector: 'hello-world',
template: `<h1>Hello {{ name }}!</h1>`
})
class HelloWorldComponent {
name: string;
constructor() {
this.name = 'Angular 2';
}
}
bootstrap(HelloWorldComponent);
The @Component annotation is all you need to to turn a class into a component. The selector property defines a name of the tag that represents this component in the HTML file. The template property defines the HTML to render. In this example the value of the variable name will be evaluated and inserted in the greeting using Angular binding.
7. Start your http server by entering http-server in the command line from your project directory and enter http://localhost:8080 in your Web browser you should see a Web page that reads Hello Angular 2! Here’s how it’s rendered in my Chrome browser with Developer Tools panel open:
As you see the TypeScript compiler was downloaded as a part of your application and the transpiling of the code was done on the fly.
In this simple example I didn’t install any TypeScript related tool to keep this example IDE-agnostic. But we do use IDEs and additional install of the tsd (type definition manager) and DefinitelyTyped library would be required as well so the context-sensitive help for your code and all third-party JavaScript libraries would be available.
I like the fact that JSPM and SystemJS are written by the same developer (Guy Bedford). With these tools the configuration process is automated, modules of different formats are seemlesly loaded, TypeScript is automatically transpiled, duplicate dependencies are not being loaded, and we can can get dependencies from multiple repositories. All this comes at a price of a couple of seconds delay before you see your page loaded in a browser.
JavaScript developers are spoiled by seeing their latest code changes deployed and rendered instantaneously. Coming out of a Java project that required minutes to see my code changes in action, I can live with these extra couple seconds. But opening the configuration files auto-generated by JSPM still gives me light goose bumps. There is too much stuff in there. Again, that Java project had Maven build scripts with thousands lines of code, so I can live (for now) with 300 lines in config.js in a Hello World project, but the search of the configuration holly grail continues…
Manning opened the MEAP program for our upcoming book “Angular 2 Development with TypeScript”, where JSPM, SystemJS and TypeScript are covered in greater details.
yakovfain.com 
Angular news list http://reefeed.com/tag/angular
Is this code still supposed to work with Beta2 & 3?
I am getting: GET http://localhost:8080/angular2/angular2 404 (Not Found)I @ system.src.js:4559(anonymous function)
system.js:4 Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:8080/angular2/angular2(…) Same error in Chrome and IE (on Win10). Worked fine with alpha40 on Win8 (but I have upgraded to win10 since).
I’m not using JSPM any longer – switched to npm. But 404 is 404. I’d check the cdn URL that’s used for loading systemjs.
Try this one: //npmcdn.com/systemjs@0.19.8/dist/system.src.js
Oops, looks like I missed the last line in main.ts: bootstrap(HelloWorldComponent); Sorry, my mistake! So how to use npm instead of jspm here?
It’s described in Chapter 2 of this book: https://manning.com/books/angular-2-development-with-typescript
With that missing line added it works on home PC, but at work with firewall I still get same 404 error as before: “GET /angular2/angular2” Error (404): “Not found” Tried to replace that npmcdn url as you suggested – no difference. Any idea what might be wrong? I did not get any errors on steps described above (after specifying correct proxy in system vars).
Hi Yakov, I am using JSPM since one of the earlier releases and i am still happy with it. As most of my applications are focossing in the newest Browsers i often compile it to ES6 with typescript. I used Atom-Typescript in the beginning with, but now i moved to gulp-typescript (with sourcemaps of course) and it’s very stable and makes life easier. Especially in the combination with Angular 2 i read a lot about using jspm in combination with the typescript transpiler. Don’t you think the performance would be much better when using precompiled js files instead of transpiling it in the browser? What are your experiences?
Best regards
Dominic
We use Webpack to precompile the code and create bundles. There is no transpiling in the browser in this case. But we switched from jspm to npm long time ago.