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

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 {
 }