Merge branch 'rel/2.0.0-templates' into dev

Author: SteveSandersonMS

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-prerendering/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-prerendering",
-  "version": "2.0.6",
+  "version": "3.0.1",
   "description": "Helpers for server-side rendering of JavaScript applications in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "url": "https://github.com/aspnet/JavaScriptServices.git"
   },
   "dependencies": {
-    "domain-task": "^2.0.2"
+    "domain-task": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^6.0.42",

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-prerendering/src/Prerendering.ts

@@ -26,6 +26,7 @@ export function createServerRenderer(bootFunc: BootFunc): RenderToStringFunc {
             domainTasks: domainTaskCompletionPromise,
             data: customDataParameter
         };
+        const absoluteBaseUrl = params.origin + params.baseUrl; // Should be same value as page's <base href>
 
         // Open a new domain that can track all the async tasks involved in the app's execution
         domainTaskRun(/* code to run */ () => {
@@ -35,7 +36,7 @@ export function createServerRenderer(bootFunc: BootFunc): RenderToStringFunc {
             bindPromiseContinuationsToDomain(domainTaskCompletionPromise, domain['active']);
 
             // Make the base URL available to the 'domain-tasks/fetch' helper within this execution context
-            domainTaskBaseUrl(absoluteRequestUrl);
+            domainTaskBaseUrl(absoluteBaseUrl);
 
             // Begin rendering, and apply a timeout
             const bootFuncPromise = bootFunc(params);

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-webpack-react",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "Helpers for using Webpack with React in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
   "main": "index.js",
   "scripts": {

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-webpack",
-  "version": "1.0.29",
+  "version": "2.0.0",
   "description": "Helpers for using Webpack in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
   "main": "index.js",
   "scripts": {

src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack/src/WebpackDevMiddleware.ts

@@ -108,7 +108,7 @@ function attachWebpackDevMiddleware(app: any, webpackConfig: webpack.Configurati
     const compiler = webpack(webpackConfig);
     app.use(require('webpack-dev-middleware')(compiler, {
         noInfo: true,
-        publicPath: webpackConfig.output.publicPath,
+        publicPath: ensureLeadingSlash(webpackConfig.output.publicPath),
         watchOptions: webpackConfig.watchOptions
     }));
 
@@ -195,6 +195,14 @@ function copyRecursiveToRealFsSync(from: typeof fs, rootDir: string, exclude: Re
     });
 }
 
+function ensureLeadingSlash(value: string) {
+    if (value !== null && value.substring(0, 1) !== '/') {
+        value = '/' + value;
+    }
+
+    return value;
+}
+
 function pathJoinSafe(rootPath: string, filePath: string) {
     // On Windows, MemoryFileSystem's readdirSync output produces directory entries like 'C:'
     // which then trigger errors if you call statSync for them. Avoid this by detecting drive
@@ -257,22 +265,32 @@ export function createWebpackDevServer(callback: CreateDevServerCallback, option
                     if (!publicPath) {
                         throw new Error('To use the Webpack dev server, you must specify a value for \'publicPath\' on the \'output\' section of your webpack config (for any configuration that targets browsers)');
                     }
-                    normalizedPublicPaths.push(removeTrailingSlash(publicPath));
-
-                    // Newer versions of Microsoft.AspNetCore.SpaServices will explicitly pass an HMR endpoint URL
-                    // (because it's relative to the app's URL space root, which the client doesn't otherwise know).
-                    // For back-compatibility, fall back on connecting directly to the underlying HMR server (though
-                    // that won't work if the app is hosted on HTTPS because of the mixed-content rule, and we can't
-                    // run the HMR server itself on HTTPS because in general it has no valid cert).
-                    const hmrClientEndpoint = options.hotModuleReplacementEndpointUrl   // The URL that we'll proxy (e.g., /__asp_webpack_hmr)
-                        || `http://localhost:${listener.address().port}/__webpack_hmr`; // Fall back on absolute URL to bypass proxying
-                    const hmrServerEndpoint = options.hotModuleReplacementEndpointUrl
-                        || '/__webpack_hmr';                                            // URL is relative to webpack dev server root
+                    const publicPathNoTrailingSlash = removeTrailingSlash(publicPath);
+                    normalizedPublicPaths.push(publicPathNoTrailingSlash);
+
+                    // This is the URL the client will connect to, except that since it's a relative URL
+                    // (no leading slash), Webpack will resolve it against the runtime <base href> URL
+                    // plus it also adds the publicPath
+                    const hmrClientEndpoint = removeLeadingSlash(options.hotModuleReplacementEndpointUrl);
+
+                    // This is the URL inside the Webpack middleware Node server that we'll proxy to.
+                    // We have to prefix with the public path because Webpack will add the publicPath
+                    // when it resolves hmrClientEndpoint as a relative URL.
+                    const hmrServerEndpoint = ensureLeadingSlash(publicPathNoTrailingSlash + options.hotModuleReplacementEndpointUrl);
 
                     // We always overwrite the 'path' option as it needs to match what the .NET side is expecting
                     const hmrClientOptions = options.suppliedOptions.HotModuleReplacementClientOptions || <StringMap<string>>{};
                     hmrClientOptions['path'] = hmrClientEndpoint;
 
+                    const dynamicPublicPathKey = 'dynamicPublicPath';
+                    if (!(dynamicPublicPathKey in hmrClientOptions)) {
+                        // dynamicPublicPath default to true, so we can work with nonempty pathbases (virtual directories)
+                        hmrClientOptions[dynamicPublicPathKey] = true;
+                    } else {
+                        // ... but you can set it to any other value explicitly if you want (e.g., false)
+                        hmrClientOptions[dynamicPublicPathKey] = JSON.parse(hmrClientOptions[dynamicPublicPathKey]);
+                    }
+
                     attachWebpackDevMiddleware(app, webpackConfig, enableHotModuleReplacement, enableReactHotModuleReplacement, hmrClientOptions, hmrServerEndpoint);
                 }
             });
@@ -292,6 +310,14 @@ export function createWebpackDevServer(callback: CreateDevServerCallback, option
     });
 }
 
+function removeLeadingSlash(str: string) {
+    if (str.indexOf('/') === 0) {
+        str = str.substring(1);
+    }
+
+    return str;
+}
+
 function removeTrailingSlash(str: string) {
     if (str.lastIndexOf('/') === str.length - 1) {
         str = str.substring(0, str.length - 1);

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

@@ -10,12 +10,12 @@ import { AppComponent } from './components/app/app.component';
         AppModuleShared
     ],
     providers: [
-        { provide: 'ORIGIN_URL', useFactory: getOriginUrl }
+        { provide: 'BASE_URL', useFactory: getBaseUrl }
     ]
 })
 export class AppModule {
 }
 
-export function getOriginUrl() { 
-    return location.origin; 
+export function getBaseUrl() {
+    return document.getElementsByTagName('base')[0].href;
 }

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

@@ -8,8 +8,8 @@ import { Http } from '@angular/http';
 export class FetchDataComponent {
     public forecasts: WeatherForecast[];
 
-    constructor(http: Http, @Inject('ORIGIN_URL') originUrl: string) {
-        http.get(originUrl + '/api/SampleData/WeatherForecasts').subscribe(result => {
+    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
+        http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
             this.forecasts = result.json() as WeatherForecast[];
         }, error => console.error(error));
     }

templates/AngularSpa/ClientApp/boot.server.ts

@@ -1,6 +1,7 @@
 import 'reflect-metadata';
 import 'zone.js';
 import 'rxjs/add/operator/first';
+import { APP_BASE_HREF } from '@angular/common';
 import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
 import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
 import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
@@ -11,7 +12,8 @@ enableProdMode();
 export default createServerRenderer(params => {
     const providers = [
         { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
-        { provide: 'ORIGIN_URL', useValue: params.origin }
+        { provide: APP_BASE_HREF, useValue: params.baseUrl },
+        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
     ];
 
     return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {

templates/AngularSpa/npm-shrinkwrap.json

@@ -20,8 +20,8 @@
     "@ngtools/webpack": "1.5.0",
     "@types/node": "8.0.8",
     "angular2-template-loader": "0.6.2",
-    "aspnet-prerendering": "^2.0.5",
-    "aspnet-webpack": "^1.0.29",
+    "aspnet-prerendering": "^3.0.1",
+    "aspnet-webpack": "^2.0.0",
     "awesome-typescript-loader": "3.2.1",
     "bootstrap": "3.3.7",
     "css": "2.2.1",