Make templates work with nonempty baseUrls (e.g., IIS virtual directories)

Author: SteveSandersonMS

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/webpack.config.js

@@ -13,7 +13,7 @@ module.exports = (env) => {
         resolve: { extensions: [ '.js', '.ts' ] },
         output: {
             filename: '[name].js',
-            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
+            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
         },
         module: {
             rules: [

templates/AngularSpa/webpack.config.vendor.js

@@ -36,7 +36,7 @@ module.exports = (env) => {
             ]
         },
         output: {
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]'
         },

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

@@ -6,7 +6,7 @@ export class Fetchdata {
     public forecasts: WeatherForecast[];
 
     constructor(http: HttpClient) {
-        http.fetch('/api/SampleData/WeatherForecasts')
+        http.fetch('api/SampleData/WeatherForecasts')
             .then(result => result.json() as Promise<WeatherForecast[]>)
             .then(data => {
                 this.forecasts = data;

templates/AureliaSpa/ClientApp/boot.ts

@@ -1,5 +1,6 @@
 import 'isomorphic-fetch';
 import { Aurelia, PLATFORM } from 'aurelia-framework';
+import { HttpClient } from 'aurelia-fetch-client';
 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 +12,10 @@ export function configure(aurelia: Aurelia) {
         aurelia.use.developmentLogging();
     }
 
+    new HttpClient().configure(config => {
+        const baseUrl = document.getElementsByTagName('base')[0].href;
+        config.withBaseUrl(baseUrl);
+    });
+
     aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
 }

templates/AureliaSpa/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = (env) => {
         },
         output: {
             path: path.resolve(bundleOutputDir),
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js'
         },
         module: {

templates/AureliaSpa/webpack.config.vendor.js

@@ -38,7 +38,7 @@ module.exports = ({ prod } = {}) => {
         },
         output: {
             path: path.join(__dirname, 'wwwroot', 'dist'),
-            publicPath: '/dist/',
+            publicPath: 'dist/',
             filename: '[name].js',
             library: '[name]_[hash]',
         },

templates/KnockoutSpa/ClientApp/boot.ts

@@ -4,12 +4,14 @@ import * as ko from 'knockout';
 import './webpack-component-loader';
 import AppRootComponent from './components/app-root/app-root';
 const createHistory = require('history').createBrowserHistory;
+const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
+const basename = baseUrl.substring(0, baseUrl.length - 1); // History component needs no trailing slash
 
 // Load and register the <app-root> component
 ko.components.register('app-root', AppRootComponent);
 
 // Tell Knockout to start up an instance of your application
-ko.applyBindings({ history: createHistory() });
+ko.applyBindings({ history: createHistory({ basename }), basename });
 
 // Basic hot reloading support. Automatically reloads and restarts the Knockout app each time
 // you modify source files. This will not preserve any application state other than the URL.