我正在使用 ngPackagr 创建一个角度可重用模块。那里一切正常,但我在内部引用的图像没有出现在我安装组件的最终版本中。我尝试使用以下线程中的操作:
https://github.com/dherges/ng-packagr/issues/123
但他们似乎都没有工作。任何人都可以在这里提供一些帮助吗?
我正在使用 ngPackagr 创建一个角度可重用模块。那里一切正常,但我在内部引用的图像没有出现在我安装组件的最终版本中。我尝试使用以下线程中的操作:
https://github.com/dherges/ng-packagr/issues/123
但他们似乎都没有工作。任何人都可以在这里提供一些帮助吗?
这是因为您必须将这些图像添加到使用该包的应用程序的角度编译中。为此,您必须编辑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 文件夹,在此文件夹(或子文件夹)中,您应该可以找到您的包图像。