Merge pull request #167 from andrelmp/dev

Upgrade to angular-cli and Angular 4

.gitignore

@@ -6,6 +6,7 @@
 *.user
 *.userosscache
 *.sln.docstates
+.vscode/
 
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs

cli-linux/build-bits-linux.sh

@@ -1,18 +1,17 @@
-
-projectList=(
-    "/src/Services/Catalog/Catalog.API"
-    "/src/Services/Basket/Basket.API"
-    "/src/Services/Ordering/Ordering.API"
-    "/src/Services/Identity/Identity.API"
-    "/src/Web/WebMVC"
-    "/src/Web/WebSPA"
-    "/src/Web/WebStatus
+#!/bin/bash
+declare -a projectList=(
+    '../src/Services/Catalog/Catalog.API'
+    '../src/Services/Basket/Basket.API'
+    '../src/Services/Ordering/Ordering.API'
+    '../src/Services/Identity/Identity.API'
+    '../src/Web/WebMVC'
+    '../src/Web/WebSPA'
+    '../src/Web/WebStatus'
 )
 
 # Build SPA app
-pushd $(pwd)/src/Web/WebSPA
-npm rebuild node-sass
-npm run build:prod
+# pushd $(pwd)../src/Web/WebSPA
+# npm run build:prod
 
 for project in "${projectList[@]}"
 do
@@ -28,13 +27,13 @@ do
 done
 
 # remove old docker images:
-#images=$(docker images --filter=reference="eshop/*" -q)
-#if [ -n "$images" ]; then
-#    docker rm $(docker ps -a -q) -f
-#    echo "Deleting eShop images in local Docker repo"
-#    echo $images
-#    docker rmi $(docker images --filter=reference="eshop/*" -q) -f
-#fi
+images=$(docker images --filter=reference="eshop/*" -q)
+if [ -n "$images" ]; then
+    docker rm $(docker ps -a -q) -f
+    echo "Deleting eShop images in local Docker repo"
+    echo $images
+    docker rmi $(docker images --filter=reference="eshop/*" -q) -f
+fi
 
 # No need to build the images, docker build or docker compose will
 # do that using the images and containers defined in the docker-compose.yml file.

docker-compose.ci.build.yml

@@ -6,5 +6,5 @@ services:
     volumes:
       - .:/src
     working_dir: /src
-    command: /bin/bash -c "pushd ./src/Web/WebSPA && npm rebuild node-sass && pushd ./../../.. && dotnet restore ./eShopOnContainers-ServicesAndWebApps.sln && dotnet publish ./eShopOnContainers-ServicesAndWebApps.sln -c Release -o ./obj/Docker/publish"
+    command: /bin/bash -c "dotnet restore ./eShopOnContainers-ServicesAndWebApps.sln && dotnet publish ./eShopOnContainers-ServicesAndWebApps.sln -c Release -o ./obj/Docker/publish"
 

src/Web/WebSPA/.angular-cli.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "WebSPA"
+  },
+  "apps": [
+    {
+      "root": "Client",
+      "outDir": "wwwroot",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "globals.scss",
+        "../node_modules/bootstrap/scss/bootstrap.scss"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "Client/tsconfig.app.json"
+    },
+    {
+      "project": "Client/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {}
+  }
+}

src/Web/WebSPA/.gitignore

@@ -177,10 +177,7 @@ ClientBin/
 *.publishsettings
 node_modules/
 bower_components/
-**/wwwroot/tmp/
-**/wwwroot/*.bundle.map
-**/wwwroot/*.js
-/wwwroot/dist/
+wwwroot/
 
 
 orleans.codegen.cs

src/Web/WebSPA/Client/custom-typings.d.ts

@@ -1,2 +0,0 @@
-// Extra variables that live on Global that will be replaced by webpack DefinePlugin
-// declare var process: any;

src/Web/WebSPA/Client/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/Web/WebSPA/Client/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

src/Web/WebSPA/Client/globals.scss

@@ -1,3 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
 @import './modules/variables';
 
 $dist: './fonts/Montserrat-Regular';

src/Web/WebSPA/Client/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>eShopConContainers.WebSPA</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <esh-app>
+    <div class="preloading">
+      <i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
+    </div>
+  </esh-app>
+</body>
+</html>

src/Web/WebSPA/Client/main.ts

@@ -1,23 +1,11 @@
-import './polyfills';
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule }              from './modules/app.module';
+import { AppModule } from './modules/app.module';
+import { environment } from './environments/environment';
 
-if (process.env.ENV === 'Development') {
-  // Development
-} else {
-  // Production
+if (environment.production) {
   enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-
-// 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.
-declare var module: any;
-
-if (module.hot) {
-    module.hot.accept();
-}

src/Web/WebSPA/Client/modules/app.component.html

@@ -4,7 +4,7 @@
 
             <section class="col-lg-7 col-md-6 col-xs-12">
                 <a class="navbar-brand" routerLink="catalog">
-                    <img src="../images/brand.png" />
+                    <img src="assets/images/brand.png" />
                 </a>
             </section>
 
@@ -28,7 +28,7 @@
         <article class="row">
 
             <section class="col-sm-6">
-                <img class="esh-app-footer-brand" src="../images/brand_dark.png" />
+                <img class="esh-app-footer-brand" src="assets/images/brand_dark.png" />
             </section>
 
             <section class="col-sm-6">

src/Web/WebSPA/Client/modules/app.component.ts

@@ -13,12 +13,12 @@ import { ConfigurationService } from './shared/services/configuration.service';
  */
 
 @Component({
-    selector: 'esh-app.esh-app',
+    selector: 'esh-app',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {
-    private Authenticated: boolean = false;
+    Authenticated: boolean = false;
     subscription: Subscription;
 
     constructor(private titleService: Title, private securityService: SecurityService, private configurationService: ConfigurationService) {

src/Web/WebSPA/Client/modules/basket/basket-status/basket-status.component.html

@@ -3,7 +3,7 @@
    [routerLink]="['basket']">
 
     <div class="esh-basketstatus-image">
-        <img src="../../../images/cart.png" />
+        <img src="assets/images/cart.png" />
     </div>
     <div class="esh-basketstatus-badge">
         {{badge}}

src/Web/WebSPA/Client/modules/catalog/catalog.component.html

@@ -16,7 +16,7 @@
                 <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
             </select>
         </label>
-        <img class="esh-catalog-send" (click)="onFilterApplied($event)" src="../../images/arrow-right.svg" />
+        <img class="esh-catalog-send" (click)="onFilterApplied($event)" src="/assets/images/arrow-right.svg" />
     </div>
 </section>
 

src/Web/WebSPA/Client/modules/catalog/catalog.component.scss

@@ -4,7 +4,7 @@
     $banner-height: 260px;
 
     &-hero {
-        background-image: url('../../images/main_banner.png');
+        background-image: url('../../assets/images/main_banner.png');
         background-size: cover;
         height: $banner-height;
         width: 100%;
@@ -61,7 +61,7 @@
         }
 
         &::after {
-            background-image: url('../../images/arrow-down.png');
+            background-image: url('../../assets/images/arrow-down.png');
             content: '';
             height: 7px; //png height
             position: absolute;

src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit }    from '@angular/core';
-import { OrdersService }        from '../orders.service';
-import { IOrder }               from '../../shared/models/order.model';
+import { Component, OnInit } from '@angular/core';
+import { OrdersService } from '../orders.service';
+import { IOrderDetail } from '../../shared/models/order-detail.model';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -9,7 +9,7 @@ import { ActivatedRoute } from '@angular/router';
     templateUrl: './orders-detail.component.html'
 })
 export class OrdersDetailComponent implements OnInit {
-    order = {}; // new order
+    public order: IOrderDetail = <IOrderDetail>{};
 
     constructor(private service: OrdersService, private route: ActivatedRoute) { }
 
@@ -27,5 +27,4 @@ export class OrdersDetailComponent implements OnInit {
             console.log(this.order);
         });
     }
-}
-
+}

src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.ts

@@ -13,10 +13,10 @@ import { Router }                                   from '@angular/router';
     templateUrl: './orders-new.component.html'
 })
 export class OrdersNewComponent implements OnInit {
-    private newOrderForm: FormGroup;  // new order form
-    private isOrderProcessing: Boolean;
-    private errorReceived: Boolean;
-    private order: IOrder;
+    newOrderForm: FormGroup;  // new order form
+    isOrderProcessing: boolean;
+    errorReceived: boolean;
+    order: IOrder;
 
     constructor(private service: OrdersService, fb: FormBuilder, private router: Router) {
         // Obtain user profile information

src/Web/WebSPA/Client/modules/orders/orders.service.ts

@@ -4,6 +4,7 @@ import { Response } from '@angular/http';
 import { DataService } from '../shared/services/data.service';
 import { IOrder } from '../shared/models/order.model';
 import { IOrderItem } from '../shared/models/orderItem.model';
+import { IOrderDetail } from "../shared/models/order-detail.model";
 import { SecurityService } from '../shared/services/security.service';
 import { ConfigurationService } from '../shared/services/configuration.service';
 import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
@@ -35,7 +36,7 @@ export class OrdersService {
         });
     }
 
-    getOrder(id: number): Observable<IOrder> {
+    getOrder(id: number): Observable<IOrderDetail> {
         let url = this.ordersUrl + '/api/v1/orders/' + id;
 
         return this.service.get(url).map((response: Response) => {

src/Web/WebSPA/Client/modules/shared/components/identity/identity.html

@@ -12,7 +12,7 @@
          *ngIf="authenticated">
 
         <div class="esh-identity-name">{{userName}}</div>
-        <img class="esh-identity-image" src="../../../../images/arrow-down.png">
+        <img class="esh-identity-image" src="assets/images/arrow-down.png">
     </section>
 
     <section class="esh-identity-drop"
@@ -22,14 +22,14 @@
              [routerLink]="['orders']">
 
             <div class="esh-identity-name esh-identity-name--upper">My orders</div>
-            <img class="esh-identity-image" src="../../../../images/my_orders.png">
+            <img class="esh-identity-image" src="assets/images/my_orders.png">
         </div>
 
         <div class="esh-identity-item"
              (click)="logoutClicked($event)">
 
             <div class="esh-identity-name esh-identity-name--upper">Log Out</div>
-            <img class="esh-identity-image" src="../../../../images/logout.png">
+            <img class="esh-identity-image" src="assets/images/logout.png">
         </div>
     </section>
 </div>

src/Web/WebSPA/Client/modules/shared/components/identity/identity.ts

@@ -10,7 +10,7 @@ import { SecurityService } from  '../../services/security.service';
     styleUrls: ['./identity.scss']
 })
 export class Identity implements OnInit  {
-    private authenticated: boolean = false;
+    authenticated: boolean = false;
     private subscription: Subscription;
     private userName: string = '';
 

src/Web/WebSPA/Client/modules/shared/models/order-detail.model.ts

@@ -0,0 +1,14 @@
+import {IOrderItem} from './orderItem.model';
+
+export interface IOrderDetail {
+    ordernumber: string;
+    status: string;
+    street: string;
+    date: Date;
+    city: number;
+    state: string;
+    zipcode: string;
+    country: number;
+    total: number;
+    orderitems: IOrderItem[];
+}

src/Web/WebSPA/Client/modules/shared/shared.module.ts

@@ -16,6 +16,10 @@ import { StorageService } from './services/storage.service';
 import { Pager } from './components/pager/pager';
 import { Header } from './components/header/header';
 import { Identity } from './components/identity/identity';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+
+// Pipes:
+import { UppercasePipe } from './pipes/uppercase.pipe';
 
 @NgModule({
     imports: [
@@ -31,7 +35,9 @@ import { Identity } from './components/identity/identity';
     declarations: [
         Pager,
         Header,
-        Identity
+        Identity,
+        PageNotFoundComponent,
+        UppercasePipe
     ],
     exports: [
         // Modules
@@ -43,7 +49,9 @@ import { Identity } from './components/identity/identity';
         // Providers, Components, directive, pipes
         Pager,
         Header,
-        Identity
+        Identity,
+        PageNotFoundComponent,
+        UppercasePipe
     ]
 })
 export class SharedModule {

src/Web/WebSPA/Client/polyfills.ts

@@ -1,23 +1,68 @@
-// Added parts of es6 which are necessary for your project or your browser support requirements.
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
-import 'core-js/es6/weak-map';
-import 'core-js/es6/weak-set';
-import 'core-js/es6/typed';
-import 'core-js/es6/reflect';
-// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
-// import 'core-js/es6/promise';
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
 
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.

src/Web/WebSPA/Client/test.ts

@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+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 { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately 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.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  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();

src/Web/WebSPA/Client/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

src/Web/WebSPA/Client/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

src/Web/WebSPA/Client/typings.d.ts

@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

src/Web/WebSPA/Client/vendor.ts

@@ -1,20 +0,0 @@
-// For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on
-// chunking vendors files for async loading. You would need to import the async loaded vendors
-// at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to
-// run `typings install x` where `x` is your module
-
-// Angular 2
-import '@angular/platform-browser';
-import '@angular/platform-browser-dynamic';
-import '@angular/core';
-import '@angular/common';
-import '@angular/forms';
-import '@angular/http';
-import '@angular/router';
-
-// RxJS
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/finally';
-import 'rxjs/add/observable/throw';

src/Web/WebSPA/Server/Controllers/HomeController.cs

@@ -1,6 +1,5 @@
 // For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
 
-using System.Linq;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
@@ -18,23 +17,6 @@ namespace eShopConContainers.WebSPA.Server.Controllers
             _env = env;
             _settings = settings;
         }
-
-        public IActionResult Index()
-        {
-            ViewBag.HashedMain = GetHashedMainDotJs();
-
-            return View();
-        }
-
-        public string GetHashedMainDotJs()
-        {
-            var basePath = _env.WebRootPath + "//dist//";
-            var info = new System.IO.DirectoryInfo(basePath);
-            var file = info.GetFiles().Where(f => f.Name.StartsWith("main.") && !f.Name.EndsWith("bundle.map")).FirstOrDefault();
-
-            return file.Name;
-        }
-
         public IActionResult Configuration()
         {
             return Json(_settings.Value);

src/Web/WebSPA/Startup.cs

@@ -1,16 +1,15 @@
 using System;
+using System.IO;
 using Microsoft.AspNetCore.Antiforgery;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.SpaServices.Webpack;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.HealthChecks;
 using Newtonsoft.Json.Serialization;
 using eShopOnContainers.WebSPA;
-using Microsoft.Extensions.HealthChecks;
-using System.Threading.Tasks;
 
 namespace eShopConContainers.WebSPA
 {
@@ -76,29 +75,34 @@ namespace eShopConContainers.WebSPA
 
             // Configure XSRF middleware, This pattern is for SPA style applications where XSRF token is added on Index page 
             // load and passed back token on every subsequent async request            
+            // app.Use(async (context, next) =>
+            // {
+            //     if (string.Equals(context.Request.Path.Value, "/", StringComparison.OrdinalIgnoreCase))
+            //     {
+            //         var tokens = antiforgery.GetAndStoreTokens(context);
+            //         context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false });
+            //     }
+            //     await next.Invoke();
+            // });
+
             app.Use(async (context, next) =>
             {
-                if (string.Equals(context.Request.Path.Value, "/", StringComparison.OrdinalIgnoreCase))
+                await next();
+
+                // If there's no available file and the request doesn't contain an extension, we're probably trying to access a page.
+                // Rewrite request to use app root
+                if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith("/api"))
                 {
-                    var tokens = antiforgery.GetAndStoreTokens(context);
-                    context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, new CookieOptions() { HttpOnly = false });
+                    context.Request.Path = "/index.html"; 
+                    context.Response.StatusCode = 200; // Make sure we update the status code, otherwise it returns 404
+                    await next();
                 }
-                await next.Invoke();
             });
 
+            app.UseDefaultFiles();
             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" });
-            });
+            app.UseMvcWithDefaultRoute();
         }
     }
 }

src/Web/WebSPA/Views/Home/Index.cshtml

@@ -1,12 +0,0 @@
-<esh-app class="esh-app" asp-prerender-webpack-config="config/webpack.config.js">
-    <div class="preloading">
-        <i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
-    </div>
-</esh-app>
-
-<script>
-    window.user = '@ViewBag.user';
-</script>
-
-<script src="~/dist/vendor.js" asp-append-version="true"></script>
-<script src="~/dist/@ViewBag.HashedMain" asp-append-version="true"></script>

src/Web/WebSPA/Views/Shared/_Layout.cshtml

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>eShopConContainers.WebSPA</title>
-    <base href="/" />
-    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
-</head>
-
-<body>
-    @RenderBody()
-</body>
-
-</html>

src/Web/WebSPA/Views/_ViewImports.cshtml

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

src/Web/WebSPA/Views/_ViewStart.cshtml

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

src/Web/WebSPA/WebSPA.csproj

@@ -22,21 +22,9 @@
     <Content Update="appsettings.json;">
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
-    <Content Update="Client\**\*;">
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
-    <Content Update="Views\**\*;">
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
-    <Content Update="tsconfig.json;">
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
     <Content Update="web.config;">
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
-    <Content Update="config\**\*;">
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
     <Content Update="wwwroot\**\*;">
       <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
     </Content>
@@ -51,7 +39,6 @@
     <PackageReference Include="Microsoft.AspNetCore.Antiforgery" Version="1.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Authorization" Version="1.1.0" />
     <PackageReference Include="Newtonsoft.Json" Version="9.0.1" />
-    <PackageReference Include="Webpack" Version="3.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.AngularServices" Version="1.0.0-beta-000014" />
     <PackageReference Include="Microsoft.AspNetCore.Server.IISIntegration" Version="1.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Server.Kestrel" Version="1.1.0" />

src/Web/WebSPA/config/helpers.js

@@ -1,23 +0,0 @@
-/**
- * @author: @AngularClass
- */
-
-var path = require('path');
-
-// Helper functions
-var ROOT = path.resolve(__dirname, '..');
-
-console.log('root directory:', root() + '\n');
-
-function hasProcessFlag(flag) {
-  return process.argv.join('').indexOf(flag) > -1;
-}
-
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [ROOT].concat(args));
-}
-
-
-exports.hasProcessFlag = hasProcessFlag;
-exports.root = root;

src/Web/WebSPA/config/webpack.config.dev.js

@@ -1,3 +0,0 @@
-module.exports = {
-    //devtool: 'cheap-module-source-map'
-};

src/Web/WebSPA/config/webpack.config.js

@@ -1,77 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var extractCSS = new ExtractTextPlugin('styles.css');
-var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
-var devConfig = require('./webpack.config.dev');
-var prodConfig = require('./webpack.config.prod');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
-
-console.log("==========Dev Mode = " + isDevelopment + " ============" )
-
-module.exports = merge({
-    resolve: {
-        extensions: ['.js', '.ts']
-    },
-    module: {
-        rules: [
-            {
-                test: /\.ts$/, exclude: [/\.(spec|e2e)\.ts$/],
-                loaders: ['awesome-typescript-loader?forkChecker=true ', 'angular2-template-loader', 'angular2-router-loader']
-            },
-            { test: /\.html$/, loader: "html" },
-            { test: /\.scss$/, loader: 'exports-loader?module.exports.toString()!css-loader!sass-loader' },
-            { test: /\.json$/, loader: 'json-loader' },
-            {
-                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file-loader"
-            }, {
-                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file-loader"
-            }, {
-                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file-loader"
-            }, {
-                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file-loader"
-            }, 
-            {
-                test: /\.(png|jpg|gif|svg)$/,
-                loader: "file-loader?name=images/[name].[ext]"
-            }
-        ]
-    },
-    entry: {
-        'main': './Client/main.ts'
-    },
-    output: {
-        path: path.join(__dirname, '../wwwroot', 'dist'),
-        filename: '[name].js',
-        publicPath: '/dist/'
-    },
-    profile: true,
-    plugins: [
-        extractCSS,
-        new webpack.DllReferencePlugin({
-            context: __dirname,
-            manifest: require('../wwwroot/dist/vendor-manifest.json')
-        }),
-        // To eliminate warning
-        // https://github.com/AngularClass/angular2-webpack-starter/issues/993
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
-            __dirname
-        ),
-        new ForkCheckerPlugin(),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(process.env.ASPNETCORE_ENVIRONMENT)
-            }
-        }),
-         new CopyWebpackPlugin([
-            { from: 'Client/fonts', to: 'fonts' }
-         ])
-    ]
-}, isDevelopment ? devConfig : prodConfig);

src/Web/WebSPA/config/webpack.config.prod.js

@@ -1,23 +0,0 @@
-var webpack = require('webpack');
-const WebpackMd5Hash = require('webpack-md5-hash');
-
-module.exports = {
-    devtool: 'source-map',
-    output: {
-        filename: '[name].[chunkhash].bundle.js',
-        sourceMapFilename: '[name].[chunkhash].bundle.map',
-        chunkFilename: '[id].[chunkhash].chunk.js'
-    },
-    plugins: [
-        // new webpack.LoaderOptionsPlugin({
-        //     minimize: true,
-        //     debug: false
-        // }),
-        new WebpackMd5Hash(),
-        new webpack.optimize.UglifyJsPlugin({
-            beautify: false,
-            comments: false,
-            sourceMap: true
-        })
-    ]
-};

src/Web/WebSPA/config/webpack.config.vendor.js

@@ -1,74 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var extractCSS = new ExtractTextPlugin('vendor.css');
-var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
-
-module.exports = {
-    resolve: {
-        extensions: ['.js']
-    },
-    module: {
-        rules: [
-            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
-            { test: /\.scss$/i, loader: extractCSS.extract(['css?minimize', 'sass']) },
-            { test: /\.json$/, loader: 'json-loader' }
-        ]
-    },
-    entry: {
-        // polyfills: [
-        //     'core-js/es6/symbol',
-        //     'core-js/es6/object',
-        //     'core-js/es6/function',
-        //     'core-js/es6/parse-int',
-        //     'core-js/es6/parse-float',
-        //     'core-js/es6/number',
-        //     'core-js/es6/math',
-        //     'core-js/es6/string',
-        //     'core-js/es6/date',
-        //     'core-js/es6/array',
-        //     'core-js/es6/regexp',
-        //     'core-js/es6/map',
-        //     'core-js/es6/set',
-        //     'core-js/es6/reflect',
-        //     'core-js/es7/reflect',
-        //     'zone.js/dist/zone'
-        // ],
-        vendor: [
-            'font-awesome/scss/font-awesome.scss',
-            'bootstrap/scss/bootstrap.scss',
-            '@angular/common',
-            '@angular/compiler',
-            '@angular/core',
-            '@angular/http',
-            '@angular/forms',
-            '@angular/platform-browser',
-            '@angular/platform-browser-dynamic',
-            '@angular/router',
-            './Client/globals.scss'
-        ]
-    },
-    output: {
-        path: path.join(__dirname, '../wwwroot', 'dist'),
-        filename: '[name].js',
-        library: '[name]_[hash]',
-    },
-    plugins: [
-        extractCSS,
-        // To eliminate warning
-        // https://github.com/AngularClass/angular2-webpack-starter/issues/993
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
-            __dirname
-        ),
-        new webpack.DllPlugin({
-            path: path.join(__dirname, '../wwwroot', 'dist', '[name]-manifest.json'),
-            name: '[name]_[hash]'
-        })
-    ].concat(isDevelopment ? [] : [
-        new webpack.optimize.UglifyJsPlugin({
-            beautify: false,
-            comments: false
-        })
-    ])
-};

src/Web/WebSPA/package.json

@@ -16,90 +16,51 @@
     "email": "cesardl@microsoft.com"
   },
   "scripts": {
+    "ng": "ng",
     "rimraf": "rimraf",
-    "typings": "typings",
-    "webpack": "webpack",
-    "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot/dist",
-    "clean:dist": "npm run rimraf -- wwwroot/dist",
-    "preclean:install": "npm run clean",
-    "clean:install": "npm set progress=false && npm install",
-    "preclean:start": "npm run clean",
-    "clean:start": "npm start",
-    "build:vendor": "node node_modules/webpack/bin/webpack.js --config config/webpack.config.vendor.js",
-    "build:main": "node node_modules/webpack/bin/webpack.js --config config/webpack.config.js",
-    "setdev": "set ASPNETCORE_ENVIRONMENT=Development",
-    "setprod": "set ASPNETCORE_ENVIRONMENT=Production",
-    "build:dev": "npm run setdev && npm run clean:dist && npm run build:vendor && npm run build:main",
-    "build:prod": "npm run setprod && npm run clean:dist && npm run build:vendor && npm run build:main",
-    "version": "npm run build",
+    "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot",
+    "start": "ng serve",
+    "build:dev": "ng build",
+    "build:prod": "ng build --prod --aot --extract-css",
     "lint:sass": "sass-lint -c .sass-lint.yml Client/**/*.scss --verbose",
     "lint:ts": "tslint -c tslint.json Client/**/*.ts"
   },
   "dependencies": {
-    "@angular/common": "2.1.2",
-    "@angular/compiler": "2.1.2",
-    "@angular/compiler-cli": "2.1.2",
-    "@angular/core": "2.1.2",
-    "@angular/forms": "2.1.2",
-    "@angular/http": "2.1.2",
-    "@angular/platform-browser": "2.1.2",
-    "@angular/platform-browser-dynamic": "2.1.2",
-    "@angular/platform-server": "2.1.2",
-    "@angular/router": "3.1.2",
-    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.11",
-    "aspnet-prerendering": "1.0.7",
-    "aspnet-webpack": "1.0.24",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
     "bootstrap": "4.0.0-alpha.5",
-    "core-js": "2.4.1",
+    "core-js": "^2.4.1",
     "file-loader": "0.9.0",
     "font-awesome": "4.6.3",
     "isomorphic-fetch": "2.2.1",
     "normalize.css": "5.0.0",
     "preboot": "4.5.2",
-    "rxjs": "5.0.0-beta.12",
-    "zone.js": "0.6.26"
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "~6.0.60",
     "@types/core-js": "0.9.34",
     "@types/hammerjs": "2.0.33",
-    "@types/jasmine": "2.5.35",
-    "@types/node": "6.0.45",
     "@types/protractor": "1.5.20",
     "@types/selenium-webdriver": "2.44.26",
-    "@types/sinon": "1.16.31",
-    "@types/source-map": "0.1.28",
-    "@types/uglify-js": "2.6.28",
-    "@types/webpack": "1.12.35",
-    "angular2-router-loader": "0.3.4",
-    "angular2-template-loader": "0.6.0",
-    "awesome-typescript-loader": "2.2.4",
-    "codelyzer": "1.0.0-beta.3",
-    "copy-webpack-plugin": "4.0.1",
-    "css": "2.2.1",
-    "css-loader": "0.25.0",
-    "es6-promise": "3.2.1",
-    "es6-promise-loader": "1.0.2",
-    "exports-loader": "0.6.3",
-    "extendify": "1.0.0",
-    "extract-text-webpack-plugin": "2.0.0-beta.4",
-    "file-loader": "0.9.0",
-    "html-loader": "0.4.4",
-    "html-webpack-plugin": "2.24.1",
-    "json-loader": "0.5.4",
-    "node-sass": "4.5.0",
-    "parse5": "2.1.5",
-    "rimraf": "2.5.4",
+    "codelyzer": "~2.0.0",
     "sass-lint": "1.10.2",
-    "sass-loader": "4.0.2",
     "ts-helpers": "1.1.1",
-    "ts-node": "1.4.3",
-    "tslint": "3.15.1",
+    "ts-node": "~2.0.0",
+    "tslint": "~4.5.0",
     "typedoc": "0.5.0",
-    "typescript": "2.0.6",
-    "url-loader": "0.5.7",
-    "webpack": "2.1.0-beta.25",
-    "webpack-externals-plugin": "1.0.0",
-    "webpack-hot-middleware": "2.13.0",
-    "webpack-md5-hash": "0.0.5"
+    "typescript": "~2.2.0",
+    "url-loader": "0.5.7"
   }
 }

src/Web/WebSPA/tsconfig.json

@@ -1,42 +1,20 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "strictNullChecks": false,
-    "baseUrl": "./src",
-    "paths": {},
-    "lib": [
-      "dom",
-      "es6"
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
     ],
-    "types": [
-      "hammerjs",
-      "jasmine",
-      "node",
-      "protractor",
-      "selenium-webdriver",
-      "source-map",
-      "uglify-js",
-      "webpack"
+    "lib": [
+      "es2016",
+      "dom"
     ]
-  },
-  "exclude": [
-    "node_modules",
-    "wwwroot"
-  ],
-  "awesomeTypescriptLoaderOptions": {
-    "forkChecker": true,
-    "useWebpackText": true
-  },
-  "compileOnSave": false,
-  "buildOnSave": false,
-  "atom": {
-    "rewriteTsconfig": false
   }
-}
+}

src/Web/WebSPA/wwwroot/web.config

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<configuration>
-  <system.webServer>
-    <handlers>
-      <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified"/>
-    </handlers>
-    <httpPlatform processPath="%DNX_PATH%" arguments="%DNX_ARGS%" stdoutLogEnabled="false"/>
-  </system.webServer>
-</configuration>