Angular 5 - 动态基引用导致重复加载包|块 [英] Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks

查看：15 发布时间：2021/11/8 22:39:08 angular angular5 angular-routing

本文介绍了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 - 动态基引用导致重复加载包|块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Angular 5 - 动态基引用导致重复加载包|块 [英] Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

Angular 5 - 动态基引用导致重复加载包|块 [英] Angular 5 - Dynamic base reference is causing duplicate loading of bundles|chunks

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭