Angular 库 404 loading.gif 未找到

Question

我目前有一个包含标准 Angular 应用程序的 monorepo。在与我的应用程序相同的级别，我有一个 Angular 工作区，其中仅包含一个库。

我在主应用程序中做了必要的映射，告诉它我的图书馆在哪里。我可以毫无问题地使用我的库的组件。

我有一个名为“loader”的组件，它使用我的资产文件夹中的 gif 图像。在构建应用程序时，我看到我的图像在构建文件夹中导出良好，但是当我打开浏览器时，我收到 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 中，您可以从您的库中提取资产并 re-expose 在您的项目中。语法是：

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

当然，您可以决定在 ./assets 而不是 ./my-dependency-assets 中公开它们，但我不会将应用程序资产与库资产混合，因为同音资产会令人头疼.

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

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

Angular 库 404 loading.gif 未找到

Angular library 404 loading.gif not found

angular

angular-library

angular13