Rename Angular2Spa to AngularSpa, plus rephrase "Angular 2" as "Angular" in many places

templates/AngularSpa/AngularSpa.csproj

@@ -0,0 +1,36 @@
+<Project ToolsVersion="15.0" Sdk="Microsoft.NET.Sdk.Web">
+  <PropertyGroup>
+    <TargetFramework>netcoreapp1.1</TargetFramework>
+    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+    <IsPackable>false</IsPackable>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore" Version="1.1.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.1" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.1" />
+    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.0" />
+    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.0" />
+  </ItemGroup>
+  <ItemGroup>
+    <!-- Files not to show in IDE -->
+    <None Remove="yarn.lock" />
+
+    <!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
+    <Content Remove="ClientApp\**" />
+  </ItemGroup>
+  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
+    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
+    <Exec Command="npm install" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
+    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
+
+    <!-- Include the newly-built files in the publish output -->
+    <ItemGroup>
+      <DistFiles Include="wwwroot\dist\**; ClientApp\dist\**" />
+      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
+        <RelativePath>%(DistFiles.Identity)</RelativePath>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </ResolvedFileToPublish>
+    </ItemGroup>
+  </Target>
+</Project>

templates/AngularSpa/ClientApp/app/app.module.client.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { sharedConfig } from './app.module.shared';
+
+@NgModule({
+    bootstrap: sharedConfig.bootstrap,
+    declarations: sharedConfig.declarations,
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        ...sharedConfig.imports
+    ],
+    providers: [
+        { provide: 'ORIGIN_URL', useValue: location.origin }
+    ]
+})
+export class AppModule {
+}

templates/AngularSpa/ClientApp/app/app.module.server.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { sharedConfig } from './app.module.shared';
+
+@NgModule({
+    bootstrap: sharedConfig.bootstrap,
+    declarations: sharedConfig.declarations,
+    imports: [
+        ServerModule,
+        ...sharedConfig.imports
+    ]
+})
+export class AppModule {
+}

templates/AngularSpa/ClientApp/app/app.module.shared.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+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';
+
+export const sharedConfig: NgModule = {
+    bootstrap: [ AppComponent ],
+    declarations: [
+        AppComponent,
+        NavMenuComponent,
+        CounterComponent,
+        FetchDataComponent,
+        HomeComponent
+    ],
+    imports: [
+        RouterModule.forRoot([
+            { path: '', redirectTo: 'home', pathMatch: 'full' },
+            { path: 'home', component: HomeComponent },
+            { path: 'counter', component: CounterComponent },
+            { path: 'fetch-data', component: FetchDataComponent },
+            { path: '**', redirectTo: 'home' }
+        ])
+    ]
+};

templates/AngularSpa/ClientApp/app/components/app/app.component.css

@@ -0,0 +1,6 @@
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    .body-content {
+        padding-top: 50px;
+    }
+}

templates/AngularSpa/ClientApp/app/components/app/app.component.html

@@ -0,0 +1,10 @@
+<div class='container-fluid'>
+    <div class='row'>
+        <div class='col-sm-3'>
+            <nav-menu></nav-menu>
+        </div>
+        <div class='col-sm-9 body-content'>
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+}

templates/AngularSpa/ClientApp/app/components/counter/counter.component.html

@@ -0,0 +1,7 @@
+<h1>Counter</h1>
+
+<p>This is a simple example of an Angular component.</p>
+
+<p>Current count: <strong>{{ currentCount }}</strong></p>
+
+<button (click)="incrementCounter()">Increment</button>

templates/AngularSpa/ClientApp/app/components/counter/counter.component.spec.ts

@@ -0,0 +1,29 @@
+/// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
+import { assert } from 'chai';
+import { CounterComponent } from './counter.component';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+
+let fixture: ComponentFixture<CounterComponent>;
+
+describe('Counter component', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({ declarations: [CounterComponent] });
+        fixture = TestBed.createComponent(CounterComponent);
+        fixture.detectChanges();
+    });
+
+    it('should display a title', async(() => {
+        const titleText = fixture.nativeElement.querySelector('h1').textContent;
+        expect(titleText).toEqual('Counter');
+    }));
+
+    it('should start with count 0, then increments by 1 when clicked', async(() => {
+        const countElement = fixture.nativeElement.querySelector('strong');
+        expect(countElement.textContent).toEqual('0');
+
+        const incrementButton = fixture.nativeElement.querySelector('button');
+        incrementButton.click();
+        fixture.detectChanges();
+        expect(countElement.textContent).toEqual('1');
+    }));
+});

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'counter',
+    templateUrl: './counter.component.html'
+})
+export class CounterComponent {
+    public currentCount = 0;
+
+    public incrementCounter() {
+        this.currentCount++;
+    }
+}

templates/AngularSpa/ClientApp/app/components/fetchdata/fetchdata.component.html

@@ -0,0 +1,24 @@
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from the server.</p>
+
+<p *ngIf="!forecasts"><em>Loading...</em></p>
+
+<table class='table' *ngIf="forecasts">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let forecast of forecasts">
+            <td>{{ forecast.dateFormatted }}</td>
+            <td>{{ forecast.temperatureC }}</td>
+            <td>{{ forecast.temperatureF }}</td>
+            <td>{{ forecast.summary }}</td>
+        </tr>
+    </tbody>
+</table>

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

@@ -0,0 +1,23 @@
+import { Component, Inject } from '@angular/core';
+import { Http } from '@angular/http';
+
+@Component({
+    selector: 'fetchdata',
+    templateUrl: './fetchdata.component.html'
+})
+export class FetchDataComponent {
+    public forecasts: WeatherForecast[];
+
+    constructor(http: Http, @Inject('ORIGIN_URL') originUrl: string) {
+        http.get(originUrl + '/api/SampleData/WeatherForecasts').subscribe(result => {
+            this.forecasts = result.json() as WeatherForecast[];
+        });
+    }
+}
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}

templates/AngularSpa/ClientApp/app/components/home/home.component.html

@@ -0,0 +1,16 @@
+<h1>Hello, world!</h1>
+<p>Welcome to your new single-page application, built with:</p>
+<ul>
+    <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
+    <li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
+    <li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
+    <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
+</ul>
+<p>To help you get started, we've also set up:</p>
+<ul>
+    <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+    <li><strong>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</li>
+    <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
+    <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular app will be rebuilt and a new instance injected is into the page.</li>
+    <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
+</ul>

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

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

templates/AngularSpa/ClientApp/app/components/navmenu/navmenu.component.css

@@ -0,0 +1,59 @@
+li .glyphicon {
+    margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+li.link-active a,
+li.link-active a:hover,
+li.link-active a:focus {
+    background-color: #4189C7;
+    color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+@media (min-width: 768px) {
+    /* On small screens, convert the nav menu to a vertical sidebar */
+    .main-nav {
+        height: 100%;
+        width: calc(25% - 20px);
+    }
+    .navbar {
+        border-radius: 0px;
+        border-width: 0px;
+        height: 100%;
+    }
+    .navbar-header {
+        float: none;
+    }
+    .navbar-collapse {
+        border-top: 1px solid #444;
+        padding: 0px;
+    }
+    .navbar ul {
+        float: none;
+    }
+    .navbar li {
+        float: none;
+        font-size: 15px;
+        margin: 6px;
+    }
+    .navbar li a {
+        padding: 10px 16px;
+        border-radius: 4px;
+    }
+    .navbar a {
+        /* If a menu item's text is too long, truncate it */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

templates/AngularSpa/ClientApp/app/components/navmenu/navmenu.component.html

@@ -0,0 +1,33 @@
+<div class='main-nav'>
+    <div class='navbar navbar-inverse'>
+        <div class='navbar-header'>
+            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
+                <span class='sr-only'>Toggle navigation</span>
+                <span class='icon-bar'></span>
+                <span class='icon-bar'></span>
+                <span class='icon-bar'></span>
+            </button>
+            <a class='navbar-brand' [routerLink]="['/home']">WebApplicationBasic</a>
+        </div>
+        <div class='clearfix'></div>
+        <div class='navbar-collapse collapse'>
+            <ul class='nav navbar-nav'>
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/home']">
+                        <span class='glyphicon glyphicon-home'></span> Home
+                    </a>
+                </li>
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/counter']">
+                        <span class='glyphicon glyphicon-education'></span> Counter
+                    </a>
+                </li>
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/fetch-data']">
+                        <span class='glyphicon glyphicon-th-list'></span> Fetch data
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

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

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

templates/AngularSpa/ClientApp/boot-client.ts

@@ -0,0 +1,22 @@
+import 'reflect-metadata';
+import 'zone.js';
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module.client';
+
+if (module['hot']) {
+    module['hot'].accept();
+    module['hot'].dispose(() => {
+        // Before restarting the app, we create a new root element and dispose the old one
+        const oldRootElem = document.querySelector('app');
+        const newRootElem = document.createElement('app');
+        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
+        modulePromise.then(appModule => appModule.destroy());
+    });
+} else {
+    enableProdMode();
+}
+
+// Note: @ng-tools/webpack looks for the following expression when performing production
+// builds. Don't change how this line looks, otherwise you may break tree-shaking.
+const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);

templates/AngularSpa/ClientApp/boot-server.ts

@@ -0,0 +1,36 @@
+import 'reflect-metadata';
+import 'zone.js';
+import 'rxjs/add/operator/first';
+import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
+import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
+import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
+import { AppModule } from './app/app.module.server';
+
+enableProdMode();
+
+export default createServerRenderer(params => {
+    const providers = [
+        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
+        { provide: 'ORIGIN_URL', useValue: params.origin }
+    ];
+
+    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
+        const appRef = moduleRef.injector.get(ApplicationRef);
+        const state = moduleRef.injector.get(PlatformState);
+        const zone = moduleRef.injector.get(NgZone);
+
+        return new Promise<RenderResult>((resolve, reject) => {
+            zone.onError.subscribe(errorInfo => reject(errorInfo));
+            appRef.isStable.first(isStable => isStable).subscribe(() => {
+                // Because 'onStable' fires before 'onError', we have to delay slightly before
+                // completing the request in case there's an error to report
+                setImmediate(() => {
+                    resolve({
+                        html: state.renderToString()
+                    });
+                    moduleRef.destroy();
+                });
+            });
+        });
+    });
+});

templates/AngularSpa/ClientApp/test/boot-tests.ts

@@ -0,0 +1,33 @@
+// Load required polyfills and testing libraries
+import 'reflect-metadata';
+import 'zone.js';
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import * as testing from '@angular/core/testing';
+import * as testingBrowser from '@angular/platform-browser-dynamic/testing';
+
+// There's no typing for the `__karma__` variable. Just declare it as any
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment
+testing.getTestBed().initTestEnvironment(
+    testingBrowser.BrowserDynamicTestingModule,
+    testingBrowser.platformBrowserDynamicTesting()
+);
+
+// Then we find all the tests
+const context = require.context('../', true, /\.spec\.ts$/);
+
+// And load the modules
+context.keys().map(context);
+
+// Finally, start Karma to run the tests
+__karma__.start();

templates/AngularSpa/ClientApp/test/karma.conf.js

@@ -0,0 +1,26 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+    config.set({
+        basePath: '.',
+        frameworks: ['jasmine'],
+        files: [
+            '../../wwwroot/dist/vendor.js',
+            './boot-tests.ts'
+        ],
+        preprocessors: {
+            './boot-tests.ts': ['webpack']
+        },
+        reporters: ['progress'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        mime: { 'application/javascript': ['ts','tsx'] },
+        singleRun: false,
+        webpack: require('../../webpack.config.js')().filter(config => config.target !== 'node'), // Test against client bundle, because tests run in a browser
+        webpackMiddleware: { stats: 'errors-only' }
+    });
+};

templates/AngularSpa/Controllers/HomeController.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        public IActionResult Error()
+        {
+            return View();
+        }
+    }
+}

templates/AngularSpa/Controllers/SampleDataController.cs

@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+    [Route("api/[controller]")]
+    public class SampleDataController : Controller
+    {
+        private static string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        [HttpGet("[action]")]
+        public IEnumerable<WeatherForecast> WeatherForecasts()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            });
+        }
+
+        public class WeatherForecast
+        {
+            public string DateFormatted { get; set; }
+            public int TemperatureC { get; set; }
+            public string Summary { get; set; }
+
+            public int TemperatureF
+            {
+                get
+                {
+                    return 32 + (int)(TemperatureC / 0.5556);
+                }
+            }
+        }
+    }
+}

templates/AngularSpa/Program.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Hosting;
+
+namespace WebApplicationBasic
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            var host = new WebHostBuilder()
+                .UseKestrel()
+                .UseContentRoot(Directory.GetCurrentDirectory())
+                .UseIISIntegration()
+                .UseStartup<Startup>()
+                .Build();
+
+            host.Run();
+        }
+    }
+}

templates/AngularSpa/Startup.cs

@@ -0,0 +1,67 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.SpaServices.Webpack;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+
+namespace WebApplicationBasic
+{
+    public class Startup
+    {
+        public Startup(IHostingEnvironment env)
+        {
+            var builder = new ConfigurationBuilder()
+                .SetBasePath(env.ContentRootPath)
+                .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
+                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
+                .AddEnvironmentVariables();
+            Configuration = builder.Build();
+        }
+
+        public IConfigurationRoot Configuration { get; }
+
+        // This method gets called by the runtime. Use this method to add services to the container.
+        public void ConfigureServices(IServiceCollection services)
+        {
+            // Add framework services.
+            services.AddMvc();
+        }
+
+        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
+        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
+        {
+            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
+            loggerFactory.AddDebug();
+
+            if (env.IsDevelopment())
+            {
+                app.UseDeveloperExceptionPage();
+                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
+                    HotModuleReplacement = true
+                });
+            }
+            else
+            {
+                app.UseExceptionHandler("/Home/Error");
+            }
+
+            app.UseStaticFiles();
+
+            app.UseMvc(routes =>
+            {
+                routes.MapRoute(
+                    name: "default",
+                    template: "{controller=Home}/{action=Index}/{id?}");
+
+                routes.MapSpaFallbackRoute(
+                    name: "spa-fallback",
+                    defaults: new { controller = "Home", action = "Index" });
+            });
+        }
+    }
+}

templates/AngularSpa/Views/Home/Index.cshtml

@@ -0,0 +1,10 @@
+@{
+    ViewData["Title"] = "Home Page";
+}
+
+<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
+
+<script src="~/dist/vendor.js" asp-append-version="true"></script>
+@section scripts {
+    <script src="~/dist/main-client.js" asp-append-version="true"></script>
+}

templates/AngularSpa/Views/Shared/Error.cshtml

@@ -0,0 +1,6 @@
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>

templates/AngularSpa/Views/Shared/_Layout.cshtml

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>@ViewData["Title"] - WebApplicationBasic</title>
+        <base href="/" />
+        <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
+    </head>
+    <body>
+        @RenderBody()
+
+        @RenderSection("scripts", required: false)
+    </body>
+</html>

templates/AngularSpa/Views/_ViewImports.cshtml

@@ -0,0 +1,3 @@
+@using WebApplicationBasic
+@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
+@addTagHelper "*, Microsoft.AspNetCore.SpaServices"

templates/AngularSpa/Views/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

templates/AngularSpa/appsettings.json

@@ -0,0 +1,10 @@
+{
+  "Logging": {
+    "IncludeScopes": false,
+    "LogLevel": {
+      "Default": "Debug",
+      "System": "Information",
+      "Microsoft": "Information"
+    }
+  }
+}

templates/AngularSpa/global.json

@@ -0,0 +1,3 @@
+{
+  "sdk": { "version": "sdkVersionInjectedHere" }
+}

templates/AngularSpa/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "WebApplicationBasic",
+  "version": "0.0.0",
+  "scripts": {
+    "test": "karma start ClientApp/test/karma.conf.js"
+  },
+  "dependencies": {
+    "@angular/animations": "4.1.2",
+    "@angular/common": "4.1.2",
+    "@angular/compiler": "4.1.2",
+    "@angular/core": "4.1.2",
+    "@angular/forms": "4.1.2",
+    "@angular/http": "4.1.2",
+    "@angular/platform-browser": "4.1.2",
+    "@angular/platform-browser-dynamic": "4.1.2",
+    "@angular/platform-server": "4.1.2",
+    "@angular/router": "4.1.2",
+    "@types/node": "7.0.18",
+    "angular2-template-loader": "0.6.2",
+    "aspnet-prerendering": "^2.0.5",
+    "aspnet-webpack": "^1.0.29",
+    "awesome-typescript-loader": "3.1.3",
+    "bootstrap": "3.3.7",
+    "css": "2.2.1",
+    "css-loader": "0.28.1",
+    "es6-shim": "0.35.3",
+    "event-source-polyfill": "0.0.9",
+    "expose-loader": "0.7.3",
+    "extract-text-webpack-plugin": "2.1.0",
+    "file-loader": "0.11.1",
+    "html-loader": "0.4.5",
+    "isomorphic-fetch": "2.2.1",
+    "jquery": "3.2.1",
+    "json-loader": "0.5.4",
+    "preboot": "4.5.2",
+    "raw-loader": "0.5.1",
+    "reflect-metadata": "0.1.10",
+    "rxjs": "5.4.0",
+    "style-loader": "0.17.0",
+    "to-string-loader": "1.1.5",
+    "typescript": "2.3.2",
+    "url-loader": "0.5.8",
+    "webpack": "2.5.1",
+    "webpack-hot-middleware": "2.18.0",
+    "webpack-merge": "4.1.0",
+    "zone.js": "0.8.10"
+  },
+  "devDependencies": {
+    "@types/chai": "3.5.2",
+    "@types/jasmine": "2.5.47",
+    "chai": "3.5.0",
+    "jasmine-core": "2.6.1",
+    "karma": "1.7.0",
+    "karma-chai": "0.1.0",
+    "karma-chrome-launcher": "2.1.1",
+    "karma-cli": "1.0.1",
+    "karma-jasmine": "1.1.0",
+    "karma-webpack": "2.0.3"
+  }
+}

templates/AngularSpa/template_gitignore

@@ -0,0 +1,237 @@
+/Properties/launchSettings.json
+
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# User-specific files
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+build/
+bld/
+bin/
+Bin/
+obj/
+Obj/
+
+# Visual Studio 2015 cache/options directory
+.vs/
+/wwwroot/dist/
+/ClientApp/dist/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUNIT
+*.VisualState.xml
+TestResult.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# JustCode is a .NET coding add-in
+.JustCode
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# TODO: Comment the next line if you want to checkin your web deploy settings
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# NuGet Packages
+*.nupkg
+# The packages folder can be ignored because of Package Restore
+**/packages/*
+# except build/, which is used as an MSBuild target.
+!**/packages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/packages/repositories.config
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Microsoft Azure ApplicationInsights config file
+ApplicationInsights.config
+
+# Windows Store app package directory
+AppPackages/
+BundleArtifacts/
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+/node_modules
+
+/yarn.lock
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+
+# SQL Server files
+*.mdf
+*.ldf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+
+# FAKE - F# Make
+.fake/

templates/AngularSpa/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "es5",
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipDefaultLibCheck": true,
+    "lib": [ "es6", "dom" ],
+    "types": [ "node" ]
+  },
+  "exclude": [ "bin", "node_modules" ],
+  "atom": { "rewriteTsconfig": false }
+}

templates/AngularSpa/web.config

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+
+  <!--
+    Configure your application settings in appsettings.json. Learn more at https://go.microsoft.com/fwlink/?LinkId=786380
+  -->
+
+  <system.webServer>
+    <handlers>
+      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
+    </handlers>
+    <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false"/>
+  </system.webServer>
+</configuration>

templates/AngularSpa/webpack.config.js

@@ -0,0 +1,71 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
+
+module.exports = (env) => {
+    // Configuration in common to both client-side and server-side bundles
+    const isDevBuild = !(env && env.prod);
+    const sharedConfig = {
+        stats: { modules: false },
+        context: __dirname,
+        resolve: { extensions: [ '.js', '.ts' ] },
+        output: {
+            filename: '[name].js',
+            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
+        },
+        module: {
+            rules: [
+                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
+                { test: /\.html$/, use: 'html-loader?minimize=false' },
+                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
+                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
+            ]
+        },
+        plugins: [new CheckerPlugin()]
+    };
+
+    // Configuration for client-side bundle suitable for running in browsers
+    const clientBundleOutputDir = './wwwroot/dist';
+    const clientBundleConfig = merge(sharedConfig, {
+        entry: { 'main-client': './ClientApp/boot-client.ts' },
+        output: { path: path.join(__dirname, clientBundleOutputDir) },
+        plugins: [
+            new webpack.DllReferencePlugin({
+                context: __dirname,
+                manifest: require('./wwwroot/dist/vendor-manifest.json')
+            })
+        ].concat(isDevBuild ? [
+            // Plugins that apply in development builds only
+            new webpack.SourceMapDevToolPlugin({
+                filename: '[file].map', // Remove this line if you prefer inline source maps
+                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+            })
+        ] : [
+            // Plugins that apply in production builds only
+            new webpack.optimize.UglifyJsPlugin()
+        ])
+    });
+
+    // Configuration for server-side (prerendering) bundle suitable for running in Node
+    const serverBundleConfig = merge(sharedConfig, {
+        resolve: { mainFields: ['main'] },
+        entry: { 'main-server': './ClientApp/boot-server.ts' },
+        plugins: [
+            new webpack.DllReferencePlugin({
+                context: __dirname,
+                manifest: require('./ClientApp/dist/vendor-manifest.json'),
+                sourceType: 'commonjs2',
+                name: './vendor'
+            })
+        ],
+        output: {
+            libraryTarget: 'commonjs',
+            path: path.join(__dirname, './ClientApp/dist')
+        },
+        target: 'node',
+        devtool: 'inline-source-map'
+    });
+
+    return [clientBundleConfig, serverBundleConfig];
+};

templates/AngularSpa/webpack.config.vendor.js

@@ -0,0 +1,88 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const merge = require('webpack-merge');
+
+module.exports = (env) => {
+    const extractCSS = new ExtractTextPlugin('vendor.css');
+    const isDevBuild = !(env && env.prod);
+    const sharedConfig = {
+        stats: { modules: false },
+        resolve: { extensions: [ '.js' ] },
+        module: {
+            rules: [
+                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
+            ]
+        },
+        entry: {
+            vendor: [
+                '@angular/animations',
+                '@angular/common',
+                '@angular/compiler',
+                '@angular/core',
+                '@angular/forms',
+                '@angular/http',
+                '@angular/platform-browser',
+                '@angular/platform-browser-dynamic',
+                '@angular/router',
+                'bootstrap',
+                'bootstrap/dist/css/bootstrap.css',
+                'es6-shim',
+                'es6-promise',
+                'event-source-polyfill',
+                'jquery',
+                'zone.js',
+            ]
+        },
+        output: {
+            publicPath: '/dist/',
+            filename: '[name].js',
+            library: '[name]_[hash]'
+        },
+        plugins: [
+            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
+            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
+            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
+            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
+        ]
+    };
+
+    const clientBundleConfig = merge(sharedConfig, {
+        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
+        module: {
+            rules: [
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
+            ]
+        },
+        plugins: [
+            extractCSS,
+            new webpack.DllPlugin({
+                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
+                name: '[name]_[hash]'
+            })
+        ].concat(isDevBuild ? [] : [
+            new webpack.optimize.UglifyJsPlugin()
+        ])
+    });
+
+    const serverBundleConfig = merge(sharedConfig, {
+        target: 'node',
+        resolve: { mainFields: ['main'] },
+        output: {
+            path: path.join(__dirname, 'ClientApp', 'dist'),
+            libraryTarget: 'commonjs2',
+        },
+        module: {
+            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
+        },
+        entry: { vendor: ['aspnet-prerendering'] },
+        plugins: [
+            new webpack.DllPlugin({
+                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
+                name: '[name]_[hash]'
+            })
+        ]
+    });
+
+    return [clientBundleConfig, serverBundleConfig];
+}