How to Bootstrapping Angular 2

To Bootstrapping an the Root Component we must first Defining SystemJS Packages.

Defining SystemJS Packages

1. Add a map to the SystemJs config A map tells SystemJs where your app resides so that it knows where to load files from

   systemjs.config.js

    map: {
      app: 'app',
      ...
    }
   

2. Add a package to the SystemJs config A package defines a default file to load and default extensions for your app

   systemjs.config.js

   map: {
     app: 'app',
     ...
   },
   packages: {
   app: {
    main: './main.ts',
    defaultExtension: 'ts'
   },
     ...
   }
   

Defining Module

1. Declare the app component in the app module. app/app.module.ts

    @NgModule({
    ...
    declarations: [
     AppComponent
    ],
    ...
    })
    export class AppModule {
    }
   

2. Add the app component as the bootstrap component in the module app/app.module.ts

   @NgModule({
   ...
   declarations: [
    AppComponent
   ],
   ...
    bootstrap: [ AppComponent ]
   })
   export class AppModule {
   }
   

3. Use the platformBrowserDynamic service to bootstrap the module in the package's main executable app/main.ts

   platformBrowserDynamic().bootstrapModule(AppModule);