angular 10：图像 url 在 `Ng build` 直接列在 `dist` 文件夹和 `dist->assets` 之后从资产中给出

Question

我发现了一种情况，在 ng build 之后图像直接列在 dist 文件夹下。

我创建了一个示例 angular 应用程序。以下是详细信息。甚至图像都在资产文件夹中。它被直接复制到 dist 下。这样，它就会重复，这也会导致构建大小增加。

如何避免这种情况？我只需要资产文件夹下的图像。外面应该很干净。如果有人遇到类似问题，请提供帮助。

项目结构

angular.json

"myapp": {
  "projectType": "application",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "root": "projects/myapp",
  "sourceRoot": "projects/myapp/src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/myapp",
        "index": "projects/myapp/src/index.html",
        "main": "projects/myapp/src/main.ts",
        "polyfills": "projects/myapp/src/polyfills.ts",
        "tsConfig": "projects/myapp/tsconfig.app.json",
        "aot": true,
        "assets": [
          "projects/myapp/src/favicon.ico",
          "projects/myapp/src/assets"
        ],
        "styles": [
          "projects/myapp/src/styles.scss",
          "projects/myapp/src/assets/theme/victor-theme/style.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "projects/myapp/src/environments/environment.ts",
              "with": "projects/myapp/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },

CSS

.tree_status_ico:disabled {
    opacity: 0.6;
    background-size: 18px;
    background: transparent url(assets/img/agg_status.svg) no-repeat center;
}

构建后

Answer 1

我使用 Angular 12 创建了一个测试项目，它似乎确实有同样的问题。但我找到了一个应该有效的解决方案：

  background: transparent url("/assets/img/agg_status.svg") no-repeat center;

Answer 2

当您进行 ng build 时，angular CLI 正在执行 AOT（提前编译）并将您的 angular 应用程序代码转换为 HTML、CSS，和JS。这就是您的 dist 文件夹的内容。您在资产文件夹中的图像将 linked 到 HTML IMG 标签，在 src 属性中您将提供图像路径 'assets/imgName.jpg'。因此，编译代码部分也将使用相同的图像源 URL。因此你不能摆脱那个文件夹，因为这样做你的应用程序会中断，即由于资产文件夹在 dist 中丢失，因此不会获取图像。现在这个问题的一个可能的解决方案是-

在线发布您的图片并使用 link 作为 CSS 文件中的 img src URL 并从资产文件中删除图片。
或者从 angular.json 文件中删除资产数组中的“projects/myapp/src/assets”行并再次构建应用程序，但要避免您的应用程序失败，只需将资产文件复制粘贴到 dist 文件之前发布。

如果您遵循解决方案 2，资产数组将是

"assets": [ "projects/myapp/src/favicon.ico", ],

Answer 3

你能试试这两个选项吗？

"outputPath": "dist", “resourcesOutputPath”：“图片”

https://angular.io/cli/build

angular 10：图像 url 在 `Ng build` 直接列在 `dist` 文件夹和 `dist->assets` 之后从资产中给出

angular 10: image url given from assets after `Ng build` is listing directly under `dist` folder and `dist->assets`

css

angular

sass

angular10

ng-build