Angular + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="src/main.js"></script>
  </head>

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

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.js';

platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name: string;
  constructor() {
    this.name = `Plunker! v${VERSION.full}`;
  }
}

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

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.0",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^5.2.4",
        "@angular/compiler": "^5.2.4",
        "@angular/core": "^5.2.4",
        "@angular/platform-browser": "^5.2.4",
        "@angular/platform-browser-dynamic": "^5.2.4",
        "core-js": "^2.5.3",
        "rxjs": "^5.5.6",
        "zone.js": "^0.8.20"
    },
    "plnkr": {
        "runtime": "system"
    }
}