Simplify Angular 2 template where possible

templates/Angular2Spa/ClientApp/app/app.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { UniversalModule } from 'angular2-universal';
+import { AppComponent } from './components/app/app.component'
+import { NavMenuComponent } from './components/navmenu/navmenu.component';
+import { HomeComponent } from './components/home/home.component';
+import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
+import { CounterComponent } from './components/counter/counter.component';
+
+@NgModule({
+    bootstrap: [ AppComponent ],
+    declarations: [
+        AppComponent,
+        NavMenuComponent,
+        CounterComponent,
+        FetchDataComponent,
+        HomeComponent
+    ],
+    imports: [
+        UniversalModule,
+        RouterModule.forRoot([
+            { path: '', redirectTo: 'home', pathMatch: 'full' },
+            { path: 'home', component: HomeComponent },
+            { path: 'counter', component: CounterComponent },
+            { path: 'fetch-data', component: FetchDataComponent },
+            { path: '**', redirectTo: 'home' }
+        ])
+    ]
+})
+export class AppModule {
+}

templates/Angular2Spa/ClientApp/app/components/app/app.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app',
+    template: require('./app.component.html')
+})
+export class AppComponent {
+}

templates/Angular2Spa/ClientApp/app/components/counter/counter.component.ts

@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'counter',
-  template: require('./counter.html')
+  template: require('./counter.component.html')
 })
-export class Counter {
+export class CounterComponent {
     public currentCount = 0;
 
     public incrementCounter() {

templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.ts

@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
 import { Http } from '@angular/http';
 
 @Component({
-  selector: 'fetch-data',
+  selector: 'fetchdata',
-  template: require('./fetch-data.html')
+  template: require('./fetchdata.component.html')
 })
-export class FetchData {
+export class FetchDataComponent {
     public forecasts: WeatherForecast[];
 
     constructor(http: Http) {

templates/Angular2Spa/ClientApp/app/components/home/home.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'home',
+  template: require('./home.component.html')
+})
+export class HomeComponent {
+}

templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'nav-menu',
-  template: require('./nav-menu.html')
+  template: require('./navmenu.component.html')
 })
-export class NavMenu {
+export class NavMenuComponent {
 }

templates/Angular2Spa/ClientApp/boot-client.ts

@@ -1,30 +1,15 @@
-// the polyfills must be the first thing imported
 import 'angular2-universal-polyfills';
-
 import 'es6-shim';
-require('zone.js');
+import 'zone.js';
 import 'bootstrap';
 import 'reflect-metadata';
 import './styles/site.css';
-
-// Angular 2
 import { enableProdMode} from '@angular/core';
 import { platformUniversalDynamic } from 'angular2-universal';
+import { AppModule } from './app/app.module';
 
-// enable prod for faster renders
 enableProdMode();
-
+platformUniversalDynamic().bootstrapModule(AppModule);
-import { MainModule } from './main.browser';
-
-const platformRef = platformUniversalDynamic();
-
-// on document ready bootstrap Angular 2
-document.addEventListener('DOMContentLoaded', () => {
-
-  platformRef.bootstrapModule(MainModule);
-
-});
-
 
 // Basic hot reloading support. Automatically reloads and restarts the Angular 2 app each time
 // you modify source files. This will not preserve any application state other than the URL.

templates/Angular2Spa/ClientApp/boot-server.ts

@@ -1,76 +1,28 @@
-// the polyfills must be the first thing imported in node.js
 import 'angular2-universal-polyfills';
-
+import 'zone.js';
-// Angular 2
 import { enableProdMode } from '@angular/core';
-// Angular2 Universal
 import { platformNodeDynamic } from 'angular2-universal';
+import { AppModule } from './app/app.module';
 
-// Application imports
-import { MainModule } from './main.node';
-import { App } from './components';
-import { routes } from './routes';
-
-// enable prod for faster renders
 enableProdMode();
-
+const platform = platformNodeDynamic();
-declare var Zone: any;
 
 export default function (params: any) : Promise<{ html: string, globals?: any }> {
-
+    const requestZone = Zone.current.fork({
-    const doc = `
+        name: 'angular-universal request',
-        <!DOCTYPE html>\n
+        properties: {
-        <html>
+            baseUrl: '/',
-            <head></head>
+            requestUrl: params.url,
-            <body>
+            originUrl: params.origin,
-                <app></app>
+            preboot: false,
-            </body>
+            // TODO: Render just the <app> component instead of wrapping it inside an extra HTML document
-        </html>
+            // Waiting on https://github.com/angular/universal/issues/347
-    `;
+            document: '<!DOCTYPE html><html><head></head><body><app></app></body></html>'
-
-    // hold platform reference
-    var platformRef =  platformNodeDynamic();
-
-    var platformConfig = {
-        ngModule: MainModule,
-        document: doc,
-        preboot: false,
-        baseUrl: '/',
-        requestUrl: params.url,
-        originUrl: params.origin
-    };
-
-    // defaults
-    var cancel = false;
-
-    const _config = Object.assign({
-      get cancel() { return cancel; },
-      cancelHandler() { return Zone.current.get('cancel') }
-    }, platformConfig);
-
-    // for each user
-    const zone = Zone.current.fork({
-        name: 'UNIVERSAL request',
-        properties: _config
-    });
-
-    
-    return Promise.resolve(
-        zone.run(() => {
-            return platformRef.serializeModule(Zone.current.get('ngModule'))
-        })
-    ).then(html => {
-
-        if (typeof html !== 'string' ) {
-            return { html : doc };
         }
-        return { html };
-
-    }).catch(err => {
-        
-        console.log(err);
-        return { html : doc };
-
     });
 
+    return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule))
+        .then(html => {
+            return { html: html };
+        });
 }

templates/Angular2Spa/ClientApp/components/app/app.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-import { NavMenu } from '../nav-menu/nav-menu';
-
-@Component({
-    selector: 'app',
-    template: require('./app.html')
-})
-export class App {
-}

templates/Angular2Spa/ClientApp/components/home/home.ts

@@ -1,8 +0,0 @@
-import { Component }from '@angular/core';
-
-@Component({
-  selector: 'home',
-  template: require('./home.html')
-})
-export class Home {
-}

templates/Angular2Spa/ClientApp/components/index.ts

@@ -1,8 +0,0 @@
-// Here we can create "Barrels" so that it's easier to import everything
-// within /components
-
-export * from './app/app';
-export * from './counter/counter';
-export * from './fetch-data/fetch-data';
-export * from './home/home';
-export * from './nav-menu/nav-menu';

templates/Angular2Spa/ClientApp/main.browser.ts

@@ -1,55 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { UniversalModule } from 'angular2-universal';
-
-import { 
-  App,
-  Counter,
-  FetchData,
-  Home,
-  NavMenu
-} from './components';
-
-import { routes } from './routes';
-
-/* NOTE :
-
-  This file and `main.node.ts` are identical, at the moment(!)
-  By splitting these, you're able to create logic, imports, etc
-          that are "Platform" specific.
-
-  If you want your code to be completely Universal and don't need that
-  You can also just have 1 file, that is imported into both
-    * boot-client
-    * boot-server 
-    
-*/
-  
-// ** Top-level NgModule "container" **
-@NgModule({
-
-  // Root App Component
-  bootstrap: [ App ],
-
-  // Our Components
-  declarations: [
-    App, Counter, FetchData, Home, NavMenu 
-  ],
-
-  imports: [
-    
-    // * NOTE: Needs to be your first import (!)
-    UniversalModule, 
-    // * ^ BrowserModule, HttpModule, and JsonpModule are included here
-    
-    // Your other imports can go here :
-    FormsModule,
-    
-    // App Routing
-    RouterModule.forRoot(routes)
-  ]
-})
-export class MainModule {
-
-}

templates/Angular2Spa/ClientApp/main.node.ts

@@ -1,55 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { UniversalModule } from 'angular2-universal';
-
-import { 
-  App,
-  Counter,
-  FetchData,
-  Home,
-  NavMenu
-} from './components';
-
-import { routes } from './routes';
-
-/* NOTE :
-
-  This file and `main.browser.ts` are identical, at the moment(!)
-  By splitting these, you're able to create logic, imports, etc
-          that are "Platform" specific.
-
-  If you want your code to be completely Universal and don't need that
-  You can also just have 1 file, that is imported into both
-    * boot-client
-    * boot-server 
-    
-*/
-  
-// ** Top-level NgModule "container" **
-@NgModule({
-
-  // Root App Component
-  bootstrap: [ App ],
-
-  // Our Components
-  declarations: [
-    App, Counter, FetchData, Home, NavMenu 
-  ],
-
-  imports: [
-    
-    // * NOTE: Needs to be your first import (!)
-    UniversalModule, 
-    // ^ NodeModule, NodeHttpModule, NodeJsonpModule are included for server
-
-    // Your other imports can go here:
-    FormsModule,
-    
-    // App Routing
-    RouterModule.forRoot(routes)
-  ]
-})
-export class MainModule {
-
-}

templates/Angular2Spa/ClientApp/routes.ts

@@ -1,11 +0,0 @@
-import { Routes } from '@angular/router';
-
-import { Home, FetchData, Counter } from './components';
-
-export const routes: Routes = [
-    { path: '', redirectTo: 'home', pathMatch: 'full' },
-    { path: 'home', component: Home },
-    { path: 'counter', component: Counter },
-    { path: 'fetch-data', component: FetchData },
-    { path: '**', redirectTo: 'home' }
-];

templates/Angular2Spa/tsconfig.json

@@ -6,22 +6,9 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "skipDefaultLibCheck": true,
-    "lib": ["es6", "dom"],
+    "lib": [ "es6", "dom" ],
-    "types": [
+    "types": [ "node" ]
-      "body-parser",
-      "compression",
-      "cookie-parser",
-      "express",
-      "express-serve-static-core",
-      "mime",
-      "node",
-      "serve-static",
-      "hammerjs"
-    ]
   },
-  "exclude": [
+  "exclude": [ "bin", "node_modules" ],
-      "bin",
-      "node_modules"
-  ],
   "atom": { "rewriteTsconfig": false }
 }