Angular 5 - 动态基引用导致重复加载包|块

本文介绍了Angular 5 - 动态基引用导致重复加载包|块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

应用主页网址如下所示:-

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

client1、client2 等是 IIS 中的虚拟目录.

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

我观察到重复块的 Web 请求 url 的一件事.假设 script.xxxxxxxxxxxxxxxxxxxxxx.bundles.css.

第一个网络请求:-

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

<html lang="zh-cn"><头><meta charset="utf-8"><title>网页</title><link href="/assets/Images/favicon.ico" rel="shortcut icon" type="image/x-icon"><base id="baseHref" href="/"><脚本>(功能 () {if (window.location.hostname !== 'localhost') document.getElementById('baseHref').href = "/" + window.location.pathname.split('/')[1] + "/";})();<meta name="viewport" content="width=device-width, initial-scale=1"><身体><app-root></app-root></html>

请建议，如何纠正这个问题.

解决方案

问题出在 ng 构建参数期间.

之前是

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

在我将结尾/添加到 ng build 语句后，它运行良好.

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

重复的角度块消失了.

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.

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.

解决方案

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.

这篇关于Angular 5 - 动态基引用导致重复加载包|块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！