angular - 无法使用 ngPackagr 使用 Assets /图像来创建 Angular 模块

Question

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

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

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

Answer 1

这是因为您必须将这些图像添加到使用该包的应用程序的 Angular 编译中。为此，您必须编辑 angular.json这个应用程序的文件。假设您的包中的静态 Assets (图像、字体等)位于 [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 不会复制包中的静态 Assets ，因此您应该在构建之后和发布/打包之前复制它们。您可以使用 package.json脚本，例如:

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

或者

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

要测试您的 Assets 是否进入最终构建，您可以运行 ng build --prod在实现包的应用程序中。这将生成一个 dist 文件夹，在此文件夹(或子文件夹)中，您应该可以找到您的包图像。