IIS中的Angular 10 --deploy-url资产路径

问题描述

从版本7升级到 Angular 10 后，资产文件夹的字体和图像未加载到浏览器中并出现404错误。

http://localhost/assets/fonts/Regular/OpenSans-Regular.woff?v=1.1.0 net::ERR_ABORTED 404 (Not Found)

我将我的角度应用程序托管在 IIS 中的子目录中，并使用--deploy-url和--base-href开关来构建我的应用程序。

我的构建命令：

ng build --prod --base-href /MyApp/ --deploy-url /MyApp/Scripts/

Scripts文件夹包含所有build命令输出。我将组件内部的图像引用为：

background-image: url(/assets/images/login_bg.png);

，并将Fonts引用为：

@font-face {
   font-family: 'Open Sans';
   src: url('/assets/fonts/Regular/OpenSans-Regular.eot?v=1.1.0');
   src: url('/assets/fonts/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0') format('embedded-opentype'),url('/assets/fonts/Regular/OpenSans-Regular.woff?v=1.1.0') format('woff'),url('/assets/fonts/Regular/OpenSans-Regular.ttf?v=1.1.0') format('truetype'),url('/assets/fonts/Regular/OpenSans-Regular.svg?v=1.1.0#Regular') format('svg');
   font-weight: normal;
   font-style: normal;
}

我注意到在角度CLI 7和角度CLI 10中，构建输出是不同的。

在这里我们可以看到，使用 Angular 7 ，我们具有在Web服务器中定位图像的正确路径，但是在 Angular 10 中，我们仅具有导致404错误的部分路径。>

请提出建议。

解决方法

在github中记录了相同的问题

基本上，推荐的解决方案是使用从组件文件夹到根级别../文件夹的相对路径assets。

angular angular-cli angular10