没有找到角库404 loading.gif

Question

我现在有一个单极函数，包含一个标准的角度应用程序。在与我的应用程序相同的水平上，我有一个只包含一个库的角工作区。

我在主应用程序中做了必要的映射，告诉它我的库在哪里。我可以在没有任何问题的情况下使用库的组件。

我有一个名为“加载程序”的组件，它使用位于“资产”文件夹中的gif映像。在构建应用程序时，我看到我的图像在build文件夹中被很好地导出，但是当我打开浏览器时，我收到一个404错误，它找不到我的gif。

projects/my-lib-name/: ng-package.json

  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/hive-commons",
  "assets": ["./assets"],
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

projects/my-lib-name/src/lib/my-module/my-folder-component: my-component.html

<img src="assets/hive-commons/img/loading.gif" alt="Loading"/>

在workspace-name/dist/my-lib-name/assets/img内部，我可以看到我的loading.gif，但是当我在应用程序中导入这个组件时，我得到了这个404 loading.gif not found -> http://localhost:4200/assets/hive-commons/img/hive-loading-70.gif

Answer 1

在angular.json中，您可以从库中提取资产并在项目中重新公开它们。语法是：

"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/my-dependency/assets",
    "output": "./my-dependency-assets/"
  },

当然，您可以决定在./assets而不是./my-dependency-assets中公开它们，但是我不会将应用程序资产与库资产混为一谈，因为对于同名资产来说，这将是一个令人头疼的问题。

例如，在hive中，您可以将资产文件夹重命名为hive-assets，使您的所有库组件都指向资产urls，如./hive-assets/path/to/image.png。

然后，在您的主应用程序中，将dist/hive-commons/hive-assets重新映射到hive-assets