Update Aurelia SPA template

templates/AureliaSpa/ClientApp/app/components/app/app.ts

@@ -1,4 +1,4 @@
-import { Aurelia } from 'aurelia-framework';
+import { Aurelia, PLATFORM } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
 
 export class App {
@@ -10,21 +10,21 @@ export class App {
             route: [ '', 'home' ],
             name: 'home',
             settings: { icon: 'home' },
-            moduleId: '../home/home',
+            moduleId: PLATFORM.moduleName('../home/home'),
             nav: true,
             title: 'Home'
         }, {
             route: 'counter',
             name: 'counter',
             settings: { icon: 'education' },
-            moduleId: '../counter/counter',
+            moduleId: PLATFORM.moduleName('../counter/counter'),
             nav: true,
             title: 'Counter'
         }, {
             route: 'fetch-data',
             name: 'fetchdata',
             settings: { icon: 'th-list' },
-            moduleId: '../fetchdata/fetchdata',
+            moduleId: PLATFORM.moduleName('../fetchdata/fetchdata'),
             nav: true,
             title: 'Fetch data'
         }]);

templates/AureliaSpa/ClientApp/boot.ts

@@ -1,5 +1,5 @@
 import 'isomorphic-fetch';
-import { Aurelia } from 'aurelia-framework';
+import { Aurelia, PLATFORM } from 'aurelia-framework';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap';
 declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build
@@ -11,5 +11,5 @@ export function configure(aurelia: Aurelia) {
         aurelia.use.developmentLogging();
     }
 
-    aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));
+    aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
 }

templates/AureliaSpa/Startup.cs

@@ -43,7 +43,7 @@ namespace WebApplicationBasic
                 app.UseDeveloperExceptionPage();
 
                 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
-                    HotModuleReplacement = false // Aurelia Webpack Plugin HMR currently has issues. Leave this set to false.
+                    HotModuleReplacement = true
                 });
             }
             else

templates/AureliaSpa/package.json

@@ -1,50 +1,30 @@
 {
-  "name": "WebApplicationBasic",
   "version": "0.0.0",
   "dependencies": {
-    "aurelia-bootstrapper-webpack": "^1.0.0",
+    "aurelia-bootstrapper": "^2.0.1",
-    "aurelia-event-aggregator": "^1.0.0",
+    "aurelia-fetch-client": "^1.0.1",
-    "aurelia-fetch-client": "^1.0.0",
+    "aurelia-framework": "^1.1.0",
-    "aurelia-framework": "^1.0.0",
+    "aurelia-loader-webpack": "^2.0.0",
-    "aurelia-history-browser": "^1.0.0",
+    "aurelia-pal": "^1.3.0",
-    "aurelia-loader-webpack": "^1.0.0",
+    "aurelia-router": "^1.2.1",
-    "aurelia-logging-console": "^1.0.0",
-    "aurelia-pal-browser": "^1.0.0",
-    "aurelia-polyfills": "^1.0.0",
-    "aurelia-route-recognizer": "^1.0.0",
-    "aurelia-router": "^1.0.2",
-    "aurelia-templating-binding": "^1.0.0",
-    "aurelia-templating-resources": "^1.0.0",
-    "aurelia-templating-router": "^1.0.0",
     "bootstrap": "^3.3.7",
     "isomorphic-fetch": "^2.2.1",
-    "jquery": "^2.2.1"
+    "jquery": "^3.2.1"
   },
   "devDependencies": {
-    "@types/node": "^6.0.45",
+    "@types/node": "^7.0.12",
-    "aspnet-webpack": "^1.0.11",
+    "aspnet-webpack": "^1.0.28",
-    "aurelia-webpack-plugin": "^1.1.0",
+    "aurelia-webpack-plugin": "^2.0.0-rc.2",
-    "copy-webpack-plugin": "^3.0.1",
+    "css-loader": "^0.28.0",
-    "css": "^2.2.1",
+    "extract-text-webpack-plugin": "^2.1.0",
-    "css-loader": "^0.25.0",
+    "file-loader": "^0.11.1",
-    "expose-loader": "^0.7.1",
+    "html-loader": "^0.4.5",
-    "extract-text-webpack-plugin": "2.0.0-beta.4",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.22.0",
     "json-loader": "^0.5.4",
-    "raw-loader": "^0.5.1",
+    "style-loader": "^0.16.1",
-    "style-loader": "^0.13.1",
+    "ts-loader": "^2.0.3",
-    "to-string-loader": "^1.1.5",
+    "typescript": "^2.2.2",
-    "ts-loader": "^0.8.2",
+    "url-loader": "^0.5.8",
-    "typescript": "^2.2.1",
+    "webpack": "^2.3.3",
-    "url-loader": "^0.5.7",
+    "webpack-hot-middleware": "^2.18.0"
-    "webpack": "2.1.0-beta.25",
-    "webpack-hot-middleware": "^2.10.0"
-  },
-  "aurelia": {
-    "build": {
-      "includeDependencies": "aurelia-*"
-    }
   }
 }

templates/AureliaSpa/tsconfig.json

@@ -6,7 +6,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "skipDefaultLibCheck": true,
-    "lib": [ "es6", "dom" ],
+    "lib": [ "es2015", "dom" ],
     "types": [ "node" ]
   },
   "exclude": [ "bin", "node_modules" ],

templates/AureliaSpa/webpack.config.js

@@ -1,24 +1,30 @@
-var isDevBuild = process.argv.indexOf('--env.prod') < 0;
+const path = require('path');
-var path = require('path');
+const webpack = require('webpack');
-var webpack = require('webpack');
+const { AureliaPlugin } = require('aurelia-webpack-plugin');
-var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
 
-var bundleOutputDir = './wwwroot/dist';
+module.exports = ({ prod } = {}) => {
-module.exports = {
+    const isDevBuild = !prod;
-    resolve: { extensions: [ '.js', '.ts' ] },
+    const isProdBuild = prod;
-    entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically
+    const bundleOutputDir = './wwwroot/dist';
+
+    return {
+        resolve: {
+            extensions: [".ts", ".js"],
+            modules: ["ClientApp", "node_modules"],
+        },
+        entry: { 'app': 'aurelia-bootstrapper' },
         output: {
             path: path.resolve(bundleOutputDir),
-        publicPath: '/dist',
+            publicPath: "/dist/",
             filename: '[name].js'
         },
         module: {
-        loaders: [
+            rules: [
-            { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
+                { test: /\.css$/i, use: [isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
-            { test: /\.html$/, loader: 'html-loader' },
+                { test: /\.html$/i, use: ["html-loader"] },
-            { test: /\.css$/, loaders: [ 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
+                { test: /\.ts$/i, loaders: ['ts-loader'], exclude: path.resolve(__dirname, 'node_modules') },
-            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
+                { test: /\.json$/i, loader: 'json-loader', exclude: path.resolve(__dirname, 'node_modules') },
-            { test: /\.json$/, loader: 'json-loader' }
+                { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader', query: { limit: 8192 } }
             ]
         },
         plugins: [
@@ -27,19 +33,19 @@ module.exports = {
                 context: __dirname,
                 manifest: require('./wwwroot/dist/vendor-manifest.json')
             }),
-        new AureliaWebpackPlugin({
+            new AureliaPlugin({ aureliaApp: "boot" }),
-            root: path.resolve('./'),
+            ...when(isDevBuild, [
-            src: path.resolve('./ClientApp'),
-            baseUrl: '/'
-        })
-    ].concat(isDevBuild ? [
-        // Plugins that apply in development builds only
                 new webpack.SourceMapDevToolPlugin({
-            filename: '[file].map', // Remove this line if you prefer inline source maps
+                    filename: '[file].map',
-            moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+                    moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
                 })
-    ] : [
+            ]),
-        // Plugins that apply in production builds only
+            ...when(isProdBuild, [
                 new webpack.optimize.UglifyJsPlugin()
             ])
+        ]
     };
+}
+
+const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
+const when = (condition, config, negativeConfig) => condition ? ensureArray(config) : ensureArray(negativeConfig)

templates/AureliaSpa/webpack.config.vendor.js

@@ -1,10 +1,12 @@
-var isDevBuild = process.argv.indexOf('--env.prod') < 0;
 var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var extractCSS = new ExtractTextPlugin('vendor.css');
 
-module.exports = {
+module.exports = ({ prod } = {}) => {
+    const isDevBuild = !prod;
+    
+    return {
         resolve: {
             extensions: ['.js']
         },
@@ -49,4 +51,5 @@ module.exports = {
         ].concat(isDevBuild ? [] : [
             new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
         ])
+    }
 };