In Angular2Spa, use angular2-template loader as a step towards AoT compilation. Implements aspnet#356

Author: SteveSandersonMS

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'app',
-    template: require('./app.component.html'),
-    styles: [require('./app.component.css')]
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 }

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

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

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

@@ -3,7 +3,7 @@ import { Http } from '@angular/http';
 
 @Component({
     selector: 'fetchdata',
-    template: require('./fetchdata.component.html')
+    templateUrl: './fetchdata.component.html'
 })
 export class FetchDataComponent {
     public forecasts: WeatherForecast[];

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

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

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'nav-menu',
-    template: require('./navmenu.component.html'),
-    styles: [require('./navmenu.component.css')]
+    templateUrl: './navmenu.component.html',
+    styleUrls: ['./navmenu.component.css']
 })
 export class NavMenuComponent {
 }

templates/Angular2Spa/package.json

@@ -13,6 +13,7 @@
     "@angular/router": "3.0.2",
     "@types/node": "^6.0.42",
     "angular2-platform-node": "~2.0.11",
+    "angular2-template-loader": "^0.6.0",
     "angular2-universal": "~2.0.11",
     "angular2-universal-polyfills": "~2.0.11",
     "aspnet-prerendering": "^1.0.7",
@@ -25,6 +26,7 @@
     "expose-loader": "^0.7.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "html-loader": "^0.4.4",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^2.2.1",
     "preboot": "^4.5.2",
@@ -37,8 +39,8 @@
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
     "webpack-hot-middleware": "^2.12.2",
-    "webpack-node-externals": "^1.4.3",
     "webpack-merge": "^0.14.1",
+    "webpack-node-externals": "^1.4.3",
     "zone.js": "^0.6.25"
   }
 }

templates/Angular2Spa/webpack.config.js

@@ -14,8 +14,8 @@ var sharedConfig = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
-            { test: /\.html$/, loader: 'raw' },
+            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts?silent=true', 'angular2-template'] },
+            { test: /\.html$/, loader: 'html' },
             { test: /\.css$/, loader: 'to-string!css' },
             { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
         ]