Question

我在项目中使用Angular 5.2版本。我正在index.html中动态设置基本引用，以满足不同客户端的不同URL。

应用程序主页URL如下所示：-

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

client1，client2等是IIS中的虚拟目录 。

当我在浏览器中运行该应用程序时，我可以从检查窗口中看到重复的块正在加载，并导致应用程序页面运行缓慢。

我观察到重复块的Web请求URL。假设script.xxxxxxxxxxxxxxxxxxxxxxxxx.bundles.css。

第一个网络请求： https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js

第二个Web请求（重复）：- https://example.com/scripts.7186135389ca4b63fab4.bundle.js

不需要第二个Web请求。而且我无法判断它是如何发生的。

Index.html在我的项目中看起来像这样：-

<!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>

请提出如何纠正此问题的建议。

Answer 1

问题出在ng build参数期间。

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

在ng build语句中添加结束符/后，它可以正常工作。

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

重复的角块消失了。

Answer 2

使用the APP_BASE_HREF provider代替HTML属性。您可以使用动态工厂的值随时间变化。

Answer 3

您可以使用ng build --base-href /myUrl/。

或在您的"baseHref" : "MY_APP_BASE_HREF_2"中添加angular.json。

具有更多信息的相关帖子：Angular 2 / 4 / 5 - Set base href dynamically

Answer 4

将此内容添加到index.html的头部

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

然后在app.module.ts文件中，添加{提供：APP_BASE_HREF，useValue：窗口['_app_base'] || '/'}到提供商列表，如下所示：

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

Angular 5-动态基本参考导致重复加载捆|块

4 个答案: