Bootstrapping an Angular 2 application

In an Angular 2 application we have different options to load application and modules, and one of these is SystemJS.

This is an open source project that give us the ability to load bunch of modules and define for each one the corresponding default main module.

Therefore you can use this library to define a default main module for an Angular 2 application; the first step is install this with npm, by adding as a dependency in the package.json file of the project:

{
 ...
 },
 "license": "ISC",
 "dependencies": {
 ...
 "systemjs": "0.19.27",
 ...
 },
 "devDependencies": {
 ...
 }
}

This library allows you to configure you application startup and defaults by using a specific json file.

The file that we need to create is called systemjs.config.js:

(function (global) {
 var map = {
 'app': 'app',
 ...
 };
 var packages = {
 'app': { main: 'main.js', defaultExtension: 'js' },
 ...
 };
var config = {
 map: map,
 packages: packages
 };
 System.config(config);
})(this);

Notice that one of the packages property is app, that is our app selector, and for that we specify the main property, that is the default loader; you can also use this file to configure other stuff, such as bundling or other default main modules.

The last step is create the loader file, that we can call, for example, Main.ts:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './App.Component';
bootstrap(AppComponent);

With the last row, we will load as default the AppComponent, that is the main component of our app.

Finally, this is the App.Component.ts file:

import { Component } from '@angular/core';

@Component({
 selector: 'app',
 templateUrl: 'app/views/app.html'
})

export class AppComponent {
 title: string = 'New App';
}

The selector property of the component is the value that we have assigned in the fourth row of the systemjs.config.js above.