UI-Router for Angular 2 - Hello World

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/core-js@2.5.1/client/shim.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.23/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://unpkg.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('helloworld').catch(console.error.bind(console)); 
    </script>
    
    <style>.active { color: red; font-weight: bold; }</style>
  </head>

  <body>
    <my-app>
      Loading...
    </my-app>
  </body>

</html>

var uirVer = '1.0.0-beta.7';
var uirCoreVer = '5.0.5';
var rxjsVer = '5.0.1';
var ng2Ver = '4.2.0';
var ng2Pkgs = ['core', 'compiler', 'common', 'http', 'platform-browser-dynamic', 'platform-browser', 'router'];

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: Object.assign(ng2MapObject(ng2Pkgs, ng2Ver), {
    'helloworld': "./helloworld.ts",
    'rxjs': 'https://unpkg.com/rxjs@' + rxjsVer,
    '@uirouter/angular': 'https://unpkg.com/@uirouter/angular@' + uirVer + '/_bundles/ui-router-ng2',
    '@uirouter/core': 'https://unpkg.com/@uirouter/core@' + uirCoreVer + '/_bundles/ui-router-core',
    '@uirouter/visualizer': 'https://unpkg.com/@uirouter/visualizer@4'
  }),
  //packages defines our app package
  packages: Object.assign(ng2PackagesObject(ng2Pkgs), {
    rxjs: { defaultExtension: 'js' }
  })
});

function ng2MapObject(ng2Packages, ng2Ver) {
  return ng2Packages.reduce(function (acc, pkg) {
    acc['@angular/' + pkg] = 'https://unpkg.com/@angular/' + pkg + '@' + ng2Ver;
    return acc;
  }, {});
}

function ng2PackagesObject(ng2Packages) {
  return ng2Packages.reduce(function(acc, pkg) {
    acc['@angular/' + pkg] = { main: 'bundles/' + pkg + '.umd.js', defaultExtension: 'js' }
    return acc;
  }, {});
}

/** imports */

import {NgModule, Component} from '@angular/core';
import {BrowserModule} from "@angular/platform-browser";
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {UIRouterModule} from "@uirouter/angular";

/** Components */

@Component({
  selector: 'my-app',
  template: `
  <a uiSref="hello" uiSrefActive="active">Hello</a>
  <a uiSref="about" uiSrefActive="active">About</a>
  <a uiSref="state" uiSrefActive="active">state</a>
  
  <ui-view></ui-view>
  `
})
export class App { }

@Component({  
  template: '<h3>Hello world!</h3>' 
})
class Hello { }

@Component({ 
  template: '<h3>Its the UI-Router hello world app!</h3>' 
})
class About { }


/** States */

let helloState = { name: 'hello', url: '/hello',  component: Hello }; 
let aboutState = { name: 'about', url: '/about',  component: About };

function configFn(router) {
  let TestState = { 
      name: 'state', 
      url: '/state', 
      onEnter(trans, state) { 
          alert(state) 
      }
  };
  
  router.stateRegistry.register(TestState);
}

/** Root Application NgModule */
@NgModule({
  imports: [ 
    BrowserModule,
    UIRouterModule.forRoot({ 
      states: [ helloState, aboutState ],
      useHash: true,
      config: configFn,
    })
  ],
  declarations: [ App, Hello, About ],
  bootstrap: [ App ]
})
class RootAppModule {}

/** Angular 2 bootstrap */

platformBrowserDynamic().bootstrapModule(RootAppModule);