Search code examples
angularangular5angular-routing

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.

enter image description here

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.

Solution

  • 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.