Angular 2 - Injector Tree (RC4)

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

import { InheritorComponent } from './inheritor.component';
import { InjectorComponent } from './injector.component';
import { RandomService } from './random.service';

@Component({
  selector: 'app',
  template: `
    <p>{{ message }}</p>
    <at-inheritor></at-inheritor>
    <at-inheritor></at-inheritor>
    <at-injector></at-injector>
    <at-injector></at-injector>
    <at-injector></at-injector>
  `,
  directives: [
    InheritorComponent,
    InjectorComponent
  ],
  viewProviders: [RandomService]
})
export class AppComponent {
  public message: number;

  constructor(randomService: RandomService) {
    this.message = randomService.value;
  }
}

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/systemjs@0.19.31/dist/system.src.js"></script>
    <script src="system.config.js"></script>
    <script>
      System.import('app').catch(function(err){console.error(err);});
    </script>
  </head>
  <body>
    <app>Loading...</app>
  </body>
</html>

(function(global) {

  var ngVer = '@2.0.0-rc.4';
  var routerVer = '@3.0.0-beta.2';
  var formsVer = '@0.2.0';

  var map = {
    'app': 'app',
    '@angular': 'https://npmcdn.com/@angular',
    '@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
    '@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js'
 };

  var packages = {
    'app': { main: 'main.ts', defaultExtension: 'ts' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'upgrade'
  ];

  ngPackageNames.forEach(function(pkgName) {
    map['@angular/' + pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
  });

  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  });

  packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

  packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' };

  var config = {
    transpiler: 'ts',
    typescriptOptions: { tsconfig: true },
    meta: {
      'typescript': { "exports": "ts" }
    },
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

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

import { RandomService } from './random.service';

@Component({
  selector: 'at-inheritor',
  template: `
    <p>{{ message }}</p>
  `
})
export class InheritorComponent {
  public message: number;

  constructor(randomService: RandomService) {
    this.message = randomService.value;
  }
}

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

import { RandomService } from './random.service';

@Component({
  selector: 'at-injector',
  template: `
    <p>{{ message }}</p>
  `,
  viewProviders: [RandomService]
})
export class InjectorComponent {
  public message: number;

  constructor(randomService: RandomService) {
    this.message = randomService.value;
  }
}

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

@Injectable()
export class RandomService {
  public value: number = Math.floor(Math.random() * 100 + 1);
}