<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.js"></script>
<script src="https://unpkg.com/typescript@2.0.3"></script>
<script src="./config.js"></script>
<script src="https://unpkg.com/core-js@2.4.1/client/core.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
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: {
app: "./src",
"@angular/core":"https://unpkg.com/@angular/core@2.1.0/bundles/core.umd.js",
"@angular/compiler":"https://unpkg.com/@angular/compiler@2.1.0/bundles/compiler.umd.js",
"@angular/common":"https://unpkg.com/@angular/common@2.1.0/bundles/common.umd.js",
"@angular/platform-browser":"https://unpkg.com/@angular/platform-browser@2.1.0/bundles/platform-browser.umd.js",
"@angular/platform-browser-dynamic":"https://unpkg.com/@angular/platform-browser-dynamic@2.1.0/bundles/platform-browser-dynamic.umd.js"
},
paths:{
"rxjs/*":"https://unpkg.com/rxjs@5.0.0-beta.12/bundles/Rx.js",
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
/* Styles go here */
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { Component, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
@Component({
selector: "my-app",
template:`
<div [ngPlural]="1">
<ng-container *ngPluralCase="'=0'">...</ng-container>
<ng-container *ngPluralCase="'other'">...</ng-container>
</div>
`,
styles: []
})
class AppComponent {
}
@NgModule({
imports: [
BrowserModule
],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);