Angular 2 Bootstrapping - Component

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Bootstrapping - Component</title>
    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="system.config.js"></script>
  </head>
  <body>
    <app-root>Loading...</app-root>
    
    <script>
      System.import('app');
    </script>
  </body>

</html>

import { Component, OnInit } from '@angular/core';
import { GreeterService } from './greeter.service';

@Component({
  selector: 'app-root',
  template: '<b>{{greeting}}</b>'
})
export class AppComponent implements OnInit {
  public greeting ='';
  
  constructor(private greeterService: GreeterService) { }
  
  ngOnInit() {
    this.greeting = this.greeterService.getMessage();
  }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app.module'

platformBrowserDynamic().bootstrapModule(AppModule)

var angularVersion = '2.3.0';

System.config({
  baseUrl: '/',
  paths: {
    'unpkg:*': 'https://unpkg.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "unpkg:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    '@angular/http': 'unpkg:@angular/http@'+angularVersion,
    '@angular/router-deprecated': 'unpkg:@angular/router-deprecated@'+angularVersion,
    'immutable': 'unpkg:immutable@3.8.1',
    'redux': 'https://unpkg.com/redux@2.0.0/dist/redux.js',
    'ng2-redux': 'unpkg:ng2-redux@2.3.2',
    'lodash': 'unpkg:lodash@4.0.0',
    'invariant': 'unpkg:invariant@2.2.1',
    'redux-thunk': 'unpkg:redux-thunk@2.1.0',
    'redux-logger': 'unpkg:redux-logger@2.6.0',
    'rxjs': 'unpkg:rxjs@5.0.0-beta.12',
    'zone.js': 'unpkg:zone.js@0.6.25',
    'reflect-metadata': 'unpkg:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './main.ts'
    }
  }
});

import { BrowserModule }  from '@angular/platform-browser';  
import { NgModule } '@angular/core';
import { AppComponent } from './app.component'
import { GreeterService } from './greeter.service';

@NgModule({
  imports: [BrowserModule],
  providers: [GreeterService],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

@Injectable()
export class GreeterService {
  private message: string = 'Registering Providers while Bootstrapping an Angular 2 application!';
  
  getMessage() {
    return this.message;
  }
}