web-dev-qa-db-de.com

Angular 5 - Dynamische Basisreferenz verursacht doppeltes Laden von | Bündeln

Ich verwende die Version Angular 5.2 im Projekt. Ich setze die Basisreferenz dynamisch in der index.html, um die unterschiedliche URL für verschiedene Clients zu erfüllen. 

Die URL der App-Hauptseite sieht folgendermaßen aus: - 

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

client1, Client2 usw. sind virtuelle Verzeichnisse im IIS. 

Wenn ich die App im Browser starte, kann ich im Inspektionsfenster sehen, dass die doppelten Blöcke geladen werden und die App-Seite langsamer wird.

Eine Sache habe ich gesehen, die Web-Request-URL der doppelten Chunks. Sagen wir script.xxxxxxxxxxxxxxxxxxxxxx.bundles.css. 

Erste Webanfrage: - https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js

Zweite Webanfrage (dupliziert): -https://example.com/scripts.7186135389ca4b63fab4.bundle.js

Die zweite Webanfrage ist nicht erwünscht. Und ich kann nicht abschätzen, wie es kommt. 

 enter image description here

Index.html sieht so aus wie in meinem Projekt: -

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

Bitte schlagen Sie vor, wie Sie dieses Problem beheben können. 

8
Karan

Das Problem liegt während der Ng-Build-Argumente. 

Früher war es ng build --prod -e = dev --base-href =/Client1

Nachdem ich der Anweisung ng build die Endung/hinzugefügt habe, hat es gut funktioniert. 

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

Die doppelten eckigen Brocken sind verschwunden. 

1
Karan

Sie können ng build --base-href /myUrl/ verwenden.

Oder fügen Sie "baseHref" : "MY_APP_BASE_HREF_2" in Ihren angular.json ein.

Zugehöriger Beitrag mit weiteren Informationen: Angular 2/4/5 - Basis-Href dynamisch setzen

0
Adam Genshaft

Verwenden Sie statt des HTML-Attributs den Provider APP_BASE_HREF . Sie können eine dynamische Factory verwenden, um einen Wert zu erhalten, der sich im Laufe der Zeit ändert.

0
Mic

Fügen Sie dies dem Kopfabschnitt in index.html hinzu

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

Fügen Sie dann in der Datei "app.module.ts" Folgendes hinzu: {include: APP_BASE_HREF, useValue: Fenster ['_ app_base'] || '/'} zur Liste der Anbieter wie folgt:

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
Vipul Handa