From 11c45321aa211ee74e61697c0dfd95cfceec94dc Mon Sep 17 00:00:00 2001
From: SteveSandersonMS <stevesa@microsoft.com>
Date: Mon, 7 Nov 2016 13:45:29 -0800
Subject: [PATCH] In Angular2Spa, use angular2-template loader as a step
 towards AoT compilation. Implements #356

---
 .../Angular2Spa/ClientApp/app/components/app/app.component.ts | 4 ++--
 .../ClientApp/app/components/counter/counter.component.ts     | 2 +-
 .../ClientApp/app/components/fetchdata/fetchdata.component.ts | 2 +-
 .../ClientApp/app/components/home/home.component.ts           | 2 +-
 .../ClientApp/app/components/navmenu/navmenu.component.ts     | 4 ++--
 templates/Angular2Spa/package.json                            | 4 +++-
 templates/Angular2Spa/webpack.config.js                       | 4 ++--
 7 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/templates/Angular2Spa/ClientApp/app/components/app/app.component.ts b/templates/Angular2Spa/ClientApp/app/components/app/app.component.ts
index 01fbf8f..b20a1ae 100644
--- a/templates/Angular2Spa/ClientApp/app/components/app/app.component.ts
+++ b/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 {
 }
diff --git a/templates/Angular2Spa/ClientApp/app/components/counter/counter.component.ts b/templates/Angular2Spa/ClientApp/app/components/counter/counter.component.ts
index 6100a3c..69de17d 100644
--- a/templates/Angular2Spa/ClientApp/app/components/counter/counter.component.ts
+++ b/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;
diff --git a/templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.ts b/templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.ts
index 266149f..e213bae 100644
--- a/templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.ts
+++ b/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[];
diff --git a/templates/Angular2Spa/ClientApp/app/components/home/home.component.ts b/templates/Angular2Spa/ClientApp/app/components/home/home.component.ts
index 16b817c..81846ce 100644
--- a/templates/Angular2Spa/ClientApp/app/components/home/home.component.ts
+++ b/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 {
 }
diff --git a/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts b/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts
index 2b0adc2..7a1691c 100644
--- a/templates/Angular2Spa/ClientApp/app/components/navmenu/navmenu.component.ts
+++ b/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 {
 }
diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json
index deddf65..2be2bed 100644
--- a/templates/Angular2Spa/package.json
+++ b/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"
   }
 }
diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js
index 34c51a2..33e002f 100644
--- a/templates/Angular2Spa/webpack.config.js
+++ b/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 } }
         ]