ui-router with host detection

<!DOCTYPE html>
<html>
  <head>
    <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.4';
var rxjsVer = '5.0.1';
var ng2Ver = '2.4.4';
var ng2Pkgs = ['core', 'compiler', 'common', 'http', 'platform-browser-dynamic', 'platform-browser'];

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,
    'ui-router-ng2': 'https://unpkg.com/ui-router-ng2@' + uirVer + '/_bundles/ui-router-ng2',
    'ui-router-visualizer': 'https://unpkg.com/ui-router-visualizer@2'
  }),
  //packages defines our app package
  packages: Object.assign(ng2PackagesObject(ng2Pkgs), {
    rxjs: { defaultExtension: 'js' }
  }),
  meta: { "ui-router-ng2": { format: "cjs" } },
});

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 {UIRouterModule} from "ui-router-ng2";
import {BrowserModule} from "@angular/platform-browser";
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

/** Components */

@Component({
  selector: 'my-app',
  template: `
  <p>Hello-blog will change the location</p>
  <a uiSref="hello" uiSrefActive="active">Hello</a>
  <a uiSref="hello-blog" uiSrefActive="active">Hello blog</a>
  <a uiSref="about" uiSrefActive="active">About</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 */

const states = [
  { name: 'hello', url: '/hello',  host: "run.plnkr.co", component: Hello },
  { name: 'hello-blog', url: '/hello',  host: "my.blog.com", component: Hello }
  { name: 'about', url: '/about',  component: About }
]

function uiRouterConfigFn(router: UIRouter, injector: Injector) {
  router.transitionService.onStart({to: "*"}, function($transition) {
     let nextState = $transition.to();
     const host = window.location.host;
     if (nextState && nextState.host && nextState.host !== host) {
       alert(`navigate to ${window.location.protocol}://${nextState.host}/${nextState.url}`)
       // you can set window.location here 
       // window.location = `${window.location.protocol}://${nextState.host}/${nextState.url}`;
     }
   });
}

/** Root Application NgModule */

@NgModule({
  imports: [ 
    BrowserModule,
    UIRouterModule.forRoot({ states: states, useHash: true, config: uiRouterConfigFn })
  ],
  declarations: [ App, Hello, About ],
  bootstrap: [ App ]
})
class RootAppModule {}

/** Angular 2 bootstrap */

platformBrowserDynamic().bootstrapModule(RootAppModule);