Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks

I am using Angular 5.2 version in the project. I am setting the base reference dynamically in the index.html to satisfy the different URL for different clients.

The app main page url looks like this :-

http://example.com/client1/app/login
http://example.com/client2/app/login
http://example.com/client3/app/login

client1, client2 etc are virtual directories in the IIS.

When i run the app in the browser, i can see from the inspect window that the duplicate chunks are getting loaded and causing the app page to slow down.

One thing i observed the web request url of the duplicate chunks. let's say script.xxxxxxxxxxxxxxxxxxxxxx.bundles.css.

First web request:- https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js

Second web request (duplicated):-https://example.com/scripts.7186135389ca4b63fab4.bundle.js

The second web-request is not desired. And i am not able to gauge how it is coming up.

Index.html is looking this like in my project :-

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Web</title>
        <link href="/assets/Images/favicon.ico" rel="shortcut icon" type="image/x-icon">
        <base id="baseHref" href="/">
        <script>
            (function () {
                if (window.location.hostname !== 'localhost') document.getElementById('baseHref').href = "/" + window.location.pathname.split('/')[1] + "/";
            })();
        </script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <app-root></app-root>
    </body>
    </html>

Please suggest, how to rectify this issue.

Karan

The problem lies during the ng build arguments.

Earlier it was

ng build --prod -e=dev --base-href=/Client1

After i added the ending / to the ng build statement, it worked fine.

ng build --prod -e=dev --base-href=/Client1/

The duplicate angular chunks gone.

Instead of using the HTML attribute, use the APP_BASE_HREF provider. You can use a dynamic factory to have a value that changes over time.

You can use ng build --base-href /myUrl/.

Or add "baseHref" : "MY_APP_BASE_HREF_2" in your angular.json.

Related post with more info: Angular 2 / 4 / 5 - Set base href dynamically

Add this to head section in index.html

<base href="/">
 <script>
 (function() {
  window['_app_base'] = '/' + window.location.pathname.split('/')[1];
 })();
</script>

Then in the app.module.ts file, add { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' } to the list of providers, like so:

import { NgModule, enableProdMode, provide } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';
import { AppComponent, routing, appRoutingProviders, environment } from './';
 if (environment.production) {
 enableProdMode();
}

  @NgModule({
  declarations: [AppComponent],
   imports: [
   BrowserModule,
   HttpModule,
   routing],
   bootstrap: [AppComponent],
   providers: [
   appRoutingProviders,
   { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
 ]
})
export class AppModule { }

来源：https://stackoverflow.com/questions/53757931/angular-5-dynamic-base-reference-is-causing-duplicate-loading-of-bundleschunk

标签

angular

angular5

angular-routing