Angular 5 - Dynamic base reference is causing dupl

2020-06-12 06:29发布

站内问答 / Angular
1938 4 4

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.

4条回答
贪生不怕死
2楼-- · 2020-06-12 06:52

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.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2020-06-12 06:54

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

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
4楼-- · 2020-06-12 06:59

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.

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
5楼-- · 2020-06-12 07:07

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 { }
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)