Angular 5 - Динамическая базовая ссылка вызывает дублирующую загрузку пакетов | чанки - PullRequest
Новая
       19

Angular 5 - Динамическая базовая ссылка вызывает дублирующую загрузку пакетов | чанки

0 голосов
/ 13 декабря 2018

Я использую версию 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.

Когда я запускаю приложение в браузере, из окна проверки я вижу, что дублирующиеся блоки загружаются и вызывают замедление страницы приложения.

Одна вещь, которую я наблюдал в Интернетезапросить URL дубликатов.скажем, script.xxxxxxxxxxxxxxxxxxxxxx.bundles.css.

Первый веб-запрос: - https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js

Второй веб-запрос (дублирован): - https://example.com/scripts.7186135389ca4b63fab4.bundle.js

Второй веб-запрос нежелательно.И я не могу оценить, как это происходит.

enter image description here

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>

Пожалуйста, предложите, как исправить эту проблему,

Ответы [ 4 ]

0 голосов
/ 07 января 2019

Проблема заключается в аргументах ng build.

Раньше это было 

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

После того, как я добавил окончание / в оператор сборки ng, все заработало нормально.

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

Двойные угловые куски исчезли.

0 голосов
/ 02 января 2019

Вы можете использовать ng build --base-href /myUrl/.

Или добавить "baseHref" : "MY_APP_BASE_HREF_2" в свой angular.json.

Связанный пост с дополнительной информацией: Угловой 2/4/5 - Наборбаза href динамически

0 голосов
/ 03 января 2019

Добавьте это в раздел head в index.html 

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

Затем в файле app.module.ts добавьте {обеспечить: APP_BASE_HREF, useValue: window ['_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 { }
0 голосов
/ 02 января 2019

Вместо использования атрибута HTML используйте провайдер APP_BASE_HREF .Вы можете использовать динамическую фабрику, чтобы иметь значение, которое меняется со временем.

...