无法使用 ngPackagr 使用资产/图像来创建角度模块

Question

我正在使用 ngPackagr 创建一个有角度的可重用模块。那里一切正常，但我在内部引用的图像没有出现在我安装组件的最终版本中。我尝试使用以下线程中的操作：

https://github.com/dherges/ng-packagr/issues/123

但他们似乎都没有工作。任何人都可以在这里提供一些帮助吗？

Answer 1

这是因为您必须将这些图像添加到使用该包的应用程序中的角度编译中。为此，您必须编辑angular.json此应用程序的文件。假设包中的静态资产（图像、字体等）位于 inside 中[YOUR_PACKAGE]/assets，那么您应该将类​​似的内容添加到angular.json实现包的应用程序的文件中：

"build": {
    // ...,
    "options": {
      // ...,
      "assets": [
        // ...,
        {
          "glob": "**/*",
          "input": "[PATH_TO_NODE_MODULES]/[YOUR_PACKAGE]/assets",
          "output": "[PATH_TO_TARGET_PROJECT_ASSETS_FOLDER]"
        }
      ]
    }
  }

因此，当 Angular 编译时，它将“抓取”包中的资源并将它们“复制”到output.

为此，图像必须位于分布式包内，通常 ngPackagr 不会复制包中的静态资源，因此您应该在构建之后、发布/打包之前复制它们。您可以使用package.json脚本来执行此操作，例如：

"pack": "ng build && cp -r ./src/assets dist npm pack"

或者

"publish": "ng build && cp -r ./src/assets dist npm publish"

要测试您的资产是否进入最终版本，您可以ng build --prod在实现该包的应用程序中运行。这将生成一个 dist 文件夹，在该文件夹（或子文件夹）中您应该可以找到您的包图像。