web-dev-qa-db-fra.com

Angular 5 - La référence de base dynamique entraîne le chargement en double des ensembles | morceaux

J'utilise la version 5.2 angulaire dans le projet. Je suis en train de définir la référence de base dynamiquement dans le fichier index.html afin de satisfaire l’URL différente pour différents clients. 

L'URL de la page principale de l'application ressemble à ceci: - 

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

client1, client2, etc. sont répertoires virtuels dans IIS. 

Lorsque je lance l'application dans le navigateur, la fenêtre d'inspection permet de voir que les fragments dupliqués sont chargés et que la page de l'application ralentit.

Une chose que j'ai observée l'URL de demande Web des morceaux dupliqués. disons script.xxxxxxxxxxxxxxxxxxxxxxxx.bundles.css. 

Première requête Web: - https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js

Deuxième requête Web (dupliquée): -https://example.com/scripts.7186135389ca4b63fab4.bundle.js

La deuxième demande Web n'est pas souhaitée. Et je ne suis pas capable de jauger comment cela se prépare. 

 enter image description here

Index.html ressemble à ceci dans mon projet: -

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

S'il vous plaît suggérer, comment résoudre ce problème. 

angularangular5angular-routing
8
Karan

Le problème réside lors des arguments de construction ng. 

Auparavant, c’était ng build --prod -e = dev --base-href =/Client1

Après avoir ajouté la fin/à la déclaration de génération ng, cela a bien fonctionné. 

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

Les morceaux angulaires en double ont disparu. 

1
Karan

Vous pouvez utiliser ng build --base-href /myUrl/.

Ou ajoutez "baseHref" : "MY_APP_BASE_HREF_2" dans votre angular.json.

Article connexe avec plus d'informations: Angulaire 2/4/5 - Définit la base href de manière dynamique

0
Adam Genshaft

Au lieu d'utiliser l'attribut HTML, utilisez le fournisseur APP_BASE_HREF . Vous pouvez utiliser une fabrique dynamique pour avoir une valeur qui change avec le temps.

0
Mic

Ajoutez ceci à la section head dans index.html

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

Dans le fichier app.module.ts, ajoutez ensuite {fourniture: APP_BASE_HREF, useValue: fenêtre ['_ _app_base'] || '/'} à la liste des fournisseurs, comme suit:

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