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

Question

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.

Please suggest how can i use the angular routing to accomplish this client specific thing. — Karan, Dec 13 '18 at 08:56
And the issue is gone when you remove base href manipulation ?? — Antoniossss, Jan 02 '19 at 08:32
Is that complete index.html?? I dont see any angular scripts loading tags here. — Antoniossss, Jan 02 '19 at 08:33
yes, this is complete index.html file content. ng build --prod generates the remaining files and add to the index.html during the build step. — Karan, Jan 02 '19 at 08:35
I did not tried yet by removing the base href manipulation code. Let me try that. — Karan, Jan 02 '19 at 08:35
ng build --prod generates the remaining file content by adding the script references during the ng build step. — Karan, Jan 02 '19 at 08:39
This is command i am using. ng build --prod -e=dev --base-href=/Client1 — Karan, Jan 02 '19 at 08:41
Thats the point. So what you need to investigate is resulting index.html not the source one. — Antoniossss, Jan 02 '19 at 08:41
What I am suspecting is that angular srcipts are getting loaded before baseurl changes and due to detect of that change app tries to reload itself. But that is just blind guess - did you check wha happens if you remove that ? — Antoniossss, Jan 02 '19 at 08:42
Also, since you are already building app with base href, cant you build it separately for every client? — Antoniossss, Jan 02 '19 at 08:43
I can't build the code separately for every client. Your guess could be right. Please suggest. — Karan, Jan 02 '19 at 08:44

score 2 · Accepted Answer · edited Aug 19 '19 at 06:12

2

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.

edited Aug 19 '19 at 06:12

AD8

2,058
1
15
28

answered Jan 07 '19 at 07:27

Karan

3,116
7
51
81

Adam Genshaft · Answer 2 · 2019-01-02T17:07:34.163

1

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

edited Jan 02 '19 at 17:07

answered Jan 02 '19 at 16:49

Adam Genshaft

667
9
21

score 1 · Answer 3 · answered Jan 03 '19 at 10:00

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 { }

have you tried this approach with Virtual Directory setup. – Karan Jan 03 '19 at 10:56 — Karan, Jan 03 '19 at 10:56
This doesn't work on angular universal as ssr – jcdsr Feb 03 '21 at 15:09 — jcdsr, Feb 03 '21 at 15:09

score 0 · Answer 4 · answered Jan 02 '19 at 13:00

0

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.

answered Jan 02 '19 at 13:00

Qortex

6,470
3
37
58

In my case, i have Virtual Directory for each client pointing to same codebase in IIS. Will this change work in my scenario ? – Karan Jan 02 '19 at 13:04
I never played around with Virtual directories and IIS, so can't say for sure. Although, if that does what I think it does, it should be fine. I guess it needs trying (simply try with constant values `Client1`, `Client2` and no html baseref and see if it works as you expect). – Qortex Jan 02 '19 at 14:35
I tried the APP_Base_HREF approach. But i still have to keep the in the index.html. – Karan Jan 03 '19 at 07:30
If i remove the tag from index.html , it does not work. The app gives the error. – Karan Jan 03 '19 at 07:32
@Karan can you provide how you solved? I'm trying leaving the index.html as angular/cli creates, and putting {provide: APP_BASE_HREF, useValue: 'my-path' } in the App.module.ts, but it's ignored... – user2010955 Jan 16 '19 at 07:43
ng build --prod -e=dev --base-href=/Client1/. I just added the last slash after /Client1 – Karan Jan 16 '19 at 16:55
@Qortex Can you please share a rough draft of how would that factory look like? Isn't the factory just called once on app load? `{provide: APP_BASE_HREF, useFactory: myFactory}` How can myFactory provide different values over time? – Junaid Oct 26 '21 at 13:56

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

4 Answers4

Linked