自定义Angular-CLI在构建时间修改相对路径

Question

我正在使用Angular CLI来构建我的Angular 4项目。我需要运行应用程序

1. 作为独立应用程序
2. 作为嵌入门户页面的应用程序

该应用程序作为独立应用程序运行良好。

当将静态内容从CDN提供的门户中嵌入到门户中时，使用相对URL加载的资源不会加载，因为它们嵌套在CDN下的不同根目录下。

例如。在我的独立应用程序中，我有一个背景图像，该图像在SCSS文件中称为背景：url（'/assets/images/bg.jpg'）。但是，当嵌入门户中时，相对URL为/cdn/app /assets/images/images/bg.jpg。

是否有一种方法可以更改SCSS和HTML中使用的相对URL，作为 ng build 的一部分？我可以定义一个保存我的CDN路径的变量，而Angular-CLI在构建时间替换了变量？

例如。

背景：url（'$ cdnapproot/Assets/images/bg.jpg'）;

用

替换

背景：url（'/cdn/app/app/app/images/bg.jpg'）

Answer 1

当您为生产构建时，可以添加deploy-url param要更改应在读取资产的地方。

ng build -d /cdn/app

我建议添加一个名为prod的新的NPM脚本以使此更容易

{
   "scripts: {
     // Other npm scripts
     "prod": "ng build -d /cdn/app"
   }
}