Angular 8 个应用的开发和生产的不同资产位置

Question

假设我的 Angular8 项目中有多个 img 标签。当我构建用于生产的应用程序时，我需要这些图像的路径不同。例如，如果我在本地处理项目时 html 模板中有以下内容

<img src="assets/image1.jpg" />

我需要它成为

<img src="images/image1.jpg" />

用于生产版本。使用 --baseHref 和 --deployUrl 没有帮助。

我该怎么做？

Answer 1

只需在环境中设置一个变量，然后相应地使用它

例如： environment.ts:

imagePath: /images

environment.prod.ts:

imagePath: /assets

然后你必须在你的 .ts 文件中导入环境并使用路径中的变量

Answer 2

为您的生产构建创建辅助应用程序配置文件，并将资产配置为输出到您想要的任何文件夹。您也可以只复制单个构建配置文件中的输出，以便将它们输出到多个位置。

配置多个应用配置文件：https://github.com/angular/angular-cli/wiki/stories-multiple-apps

资产配置：https://github.com/angular/angular-cli/wiki/stories-asset-configuration

"assets": [
  { "glob": "**/*", "input": "src/assets/", "output": "/output/" }
]

接下来只需使用环境文件来存储每个构建的路径，并使用它来绑定到您的 <img [src]="myImageVariable"/>

Answer 3

我认为唯一的解决办法是使用 Multiple Apps integration :

在您的 .angular-cli.json 中添加新的生产应用

"apps": [
  {
    "root": "src",
    ...
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "assets": [
     "src/assets",
   ]
  },
  {
    "root": "src",
    ...
    "main": "main2.ts",
    "polyfills": "polyfills2.ts",
    "test": "test2.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app2",
    "assets": [
     "src/assets2",
   ]
  }  
],

稍后 serve/building 时：

要提供第一个应用程序：ng serve --app=0 或 ng serve --app 0

要提供第二个应用程序：ng serve --app=1 或 ng serve --app 1

Answer 4

好的，建议的解决方案对我不起作用。我尝试更改 angular.json 但这仍然没有解决问题，因为 <img src="assets/myfoldername/img1.jpg /> 仍然包含 assets 部分！

由于我将 Angular 应用合并到我的 ASP.NET Core 3.0 项目中并使用 IIS 托管它，我使用了 IIS URL 重写规则，现在一切正常。所以没有添加虚拟应用程序，没有在 angular 应用程序中使用任何环境变量。 一条重写规则。完成。

PS。我将在我的 ASP.NET 核心中使用 URL 重写中间件，因此这将适用于任何 OS 和网络服务器。

Angular 8 个应用的开发和生产的不同资产位置

Different assets location for development and production for Angular 8 app

angular-cli

angular