Angular + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('config.js')
        .then(function() {
          System.import('main.ts');
        });
  </script>
  </head>

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

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 * 
 * Based on https://cdn.rawgit.com/angular/angular.io/74ef87f/public/docs/_examples/_boilerplate/systemjs.config.web.js
 */

System.config({
  // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
  transpiler: 'ts',
  typescriptOptions: {
    // Complete copy of compiler options in standard tsconfig.json
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../../node_modules/@types/"
    ]
  },
  meta: {
    'typescript': {
      "exports": "ts"
    }
  },
  paths: {
    // paths serve as alias
    'npm:': 'https://unpkg.com/'
  },
  // map tells the System loader where to look for things
  map: {
    // our app is within the app folder
    app: 'app',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
    '@angular/platform-webworker': 'npm:@angular/platform-webworker/bundles/platform-webworker.umd.js',
    '@angular/platform-webworker-dynamic': 'npm:@angular/platform-webworker-dynamic/bundles/platform-webworker-dynamic.umd.js',

    // other libraries
    'rxjs':                      'npm:rxjs',
    '@uirouter/core': 'npm:@uirouter/core@5.0.4/_bundles/ui-router-core.js',
    '@uirouter/angular': 'npm:@uirouter/angular@1.0.0-beta.7/_bundles/ui-router-ng2.js',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
    'ts':                        'npm:plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                'npm:typescript@2.0.3/lib/typescript.js'
  },
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
    main: './main.ts',
    app: {
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

import {bootstrapWorkerUi, WORKER_UI_LOCATION_PROVIDERS} from '@angular/platform-webworker';
import {App} from './app/app';

bootstrapWorkerUi(window.location.href + "workerLoader.js", [WORKER_UI_LOCATION_PROVIDERS]);

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import { WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS } from '@angular/platform-webworker';
import { APP_BASE_HREF } from '@angular/common';

import { UIRouterModule } from '@uirouter/angular';

@Component({
  selector: 'my-app',
  template: `
    <button uiSref="first">
        go to First
    </button>
    <button uiSref="second">
        go to Second
    </button>
    
    <ui-view></ui-view>
  `,
})
export class App {}

@Component({
  selector: 'app-first',
  template: `
    <p>
      first works!
    </p>
`
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@Component({
  selector: 'app-second',
  template: `
    <p>
      second works!
    </p>
  `
})
export class SecondComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}


const firstState = {
    name: 'first',
    url: '/first',
    component: FirstComponent
};

const secondState = {
    name: 'second',
    url: '/second',
    component: SecondComponent
};

export const states = [
    firstState,
    secondState
];

@NgModule({
  imports: [ 
    WorkerAppModule,
    UIRouterModule.forRoot({
      states: states,
      useHash: true,
      otherwise: '/first'
    })],
  declarations: [ App, FirstComponent, SecondComponent ],
  bootstrap: [ App ],
  providers: [
    WORKER_APP_LOCATION_PROVIDERS,
    {
        provide: APP_BASE_HREF,
        useValue: '/'
    },
]
})
export class AppModule {}

//main entry point
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import {AppModule} from './app/app';

console.log("loader is running");

platformWorkerAppDynamic().bootstrapModule(AppModule);

importScripts(
  "https://unpkg.com/zone.js@0.6.25?main=browser",
  "https://unpkg.com/reflect-metadata@0.1.8",
  "https://unpkg.com/systemjs@0.19.39/dist/system.src.js",
  "./config.js");
  
console.log("WorkerLoader");
System.import("./web-worker-main.ts");