Menu
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.
939
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 { }
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.
39
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
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
