Angular 5-动态基本参考导致重复加载捆|块 [英] Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks
问题描述
我在项目中使用Angular 5.2版本.我正在index.html中动态设置基本引用，以满足不同客户端的不同URL.
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.
应用程序主页的URL看起来像这样:-
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等是IIS中的 虚拟目录 .
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.
我观察到重复块的Web请求URL的一件事.假设script.xxxxxxxxxxxxxxxxxxxxxxxxx.bundles.css.
One thing i observed the web request url of the duplicate chunks. let's say script.xxxxxxxxxxxxxxxxxxxxxx.bundles.css.
第一个Web请求: https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js
First web request:- https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js
第二个Web请求(重复):- https://example.com/scripts .7186135389ca4b63fab4.bundle.js
Second web request (duplicated):-https://example.com/scripts.7186135389ca4b63fab4.bundle.js
不需要第二个Web请求.而且我无法判断它是如何发生的.
The second web-request is not desired. And i am not able to gauge how it is coming up.
Index.html在我的项目中看起来像这样:-
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.
推荐答案
问题出在ng build参数期间.
The problem lies during the ng build arguments.
以前是
ng build --prod -e=dev --base-href=/Client1
在ng build语句中添加结束符/后，它可以正常工作.
After i added the ending / to the ng build statement, it worked fine.
ng build --prod -e=dev --base-href=/Client1/
重复的角块消失了.
这篇关于Angular 5-动态基本参考导致重复加载捆|块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
