import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app/app.component.html'
})
export class AppComponent { }
<h2>TEMPLATE</h2>
<p>Use this template to build a demo to gather help or to show a potential bug report</p>
<br>
<div>
The template uses the following versions:
<ul>
<li>Angular2: 2.4.9</li>
<li>Angular2 Router: 3.4.9</li>
<li>zone.js: 0.8.4</li>
<li>reflect-metadata: 0.1.10</li>
<li>systemjs: 0.20.10</li>
<li>typescript: 2.1.6</li>
<li>rxjs: 5.2.0</li>
<li>plugins-typescript: latest available (typescript transpiler)</li>
<li>in-memory-web-api: latest avaialble (used to intercept requests using the http module)</li>
</ul>
</div>
<br/>
<strong>HOW TO USE</strong>
<ol>
<li>Change the title in index.html</li>
<li>Make sure the Angular2 components versions match the versions you are using</li>
</ol>
<hr>
<div>Provided to you by <a href="http://www.domstamand.com">Dominique St-Amand</a></div>
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
<!DOCTYPE html>
<html>
<head>
<title>Dominique St-Amand Plunker template for Angular2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.8.4?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.10"></script>
<script src="https://npmcdn.com/systemjs@0.20.10/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app-root>Loading...</app-root>
</body>
</html>
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
var ng2Version = '2.4.9';
var ng2RouterVersion = '3.4.9';
var typescriptVersion = '2.1.6';
var rxJsVersion = '5.2.0';
System.config({
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app : 'app',
// angular bundles
'@angular/core': 'https://npmcdn.com/@angular/core@' + ng2Version + '/bundles/core.umd.min.js',
'@angular/forms': 'https://npmcdn.com/@angular/forms@' + ng2Version + '/bundles/forms.umd.min.js',
'@angular/common': 'https://npmcdn.com/@angular/common@' + ng2Version + '/bundles/common.umd.min.js',
'@angular/compiler': 'https://npmcdn.com/@angular/compiler@' + ng2Version + '/bundles/compiler.umd.min.js',
'@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser@' + ng2Version + '/bundles/platform-browser.umd.min.js',
'@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@' + ng2Version + '/bundles/platform-browser-dynamic.umd.min.js',
'@angular/http': 'https://npmcdn.com/@angular/http@' + ng2Version + '/bundles/http.umd.min.js',
'@angular/router': 'https://npmcdn.com/@angular/router@' + ng2RouterVersion + '/bundles/router.umd.min.js',
'in-memory-web-api' : 'https://npmcdn.com/angular-in-memory-web-api',
// other libraries
'rxjs': 'https://npmcdn.com/rxjs@' + rxJsVersion,
'ts': 'https://npmcdn.com/plugin-typescript', // transpiler, use latest
'typescript': 'https://npmcdn.com/typescript@' + typescriptVersion + '/lib/typescript.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: { main: 'main.ts', defaultExtension: 'ts' },
rxjs: { defaultExtension: 'js' },
'in-memory-web-api': { defaultExtension: 'js' }
},
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
}
});
})(this);