我的 Angular 8 NPM 包没有找到自己的资产答案

【问题标题】：My Angular 8 NPM package is not finding its own assets我的 Angular 8 NPM 包没有找到自己的资产
【发布时间】：2020-07-29 06:10:45
【问题描述】：

我的资产已成功复制到我的作用域 npm 包中；但是，当我安装我的包时，它们在提供应用程序后不可用。

我的应用程序中的图像正在寻找这样的路径： https://localhost:4200/assets/images/image.jpg

在节点模块中，包文件夹结构如下所示：

-scopedPackageName

--捆绑

--esm5 ...

--资产

---图片

----image.jpg

找不到任何关于其工作原理的好文章。任何这些都将不胜感激。

我已经考虑过 base64 编码，但质量损失不适合我的用例。

我在 angular.json 中尝试了一些不起作用的东西：

"build": {
                    "builder": ...
                    "options": {
                        "outputPath": ...
                        "index": ..
                        "main": ...
                        "polyfill": ...
                        "tsConfig": ...
                        "assets": [
                            "src/assets",
                            "src/assets/images",
                            {
                                "glob": "**/*",
                                "input": "node_modules/@geode/geode-lib/assets",
                                "output": "/assets/"
                            }
                        ],
                        "styles": [...],
                        "scripts": []

还有这个

"build": {
                    "builder": ...
                    "options": {
                        "outputPath": ...
                        "index": ..
                        "main": ...
                        "polyfill": ...
                        "tsConfig": ...
                        "assets": [
                            "src/assets",
                            "src/assets/images",
                          "node_modules/@geode/geode-lib/assets",
                         "node_modules/@geode/geode-lib/assets/images"
                        ],
                        "styles": [...],
                        "scripts": []

第一个不会出错，但不会改变结果。

第二个给出这个错误：

发生未处理的异常： node_modules/scopedPackageName/assets 资产路径必须以项目源根目录。看 “C:\Users....\AppData\Local\Temp\ng-MLqnKS\angular-errors.log” 更多细节。

我尝试在节点模块文件夹中移动资产并重新提供应用程序，希望我只是将其放在错误的位置，但未能成功找到包正在查找的位置。

感谢您提供的任何见解。

【问题讨论】：

如果您构建应用程序，您是否在dist 文件夹中的某处看到images？
能否请您检查第一种情况，如果"input": "./node_modules/@geode/geode-lib/assets" 和"output": "./assets/" 开头带有. 可以工作？
@tenkmilan 是的，images 位于 dist 文件夹中的某个位置，就像我评论中的块引用一样（抱歉，它之前的格式不正确）。除了实际上在包装之外，我也尝试将它们移动到包装的不同级别并且没有任何运气。我还检查了您为我的 angular.json 文件建议的所有组合
@tenkmilan 我应该发布任何其他信息吗？它只是 angular.json 涉及指向资产吗？还是需要配置包中的某些内容？其他包在没有配置 angular.json 的情况下是如何做到的？
不，谢谢，我理解了这个问题，并通过下面的示例发布了答案。在angular.json 中配置，应该从哪里收集资产。这些资产将在构建过程中放置在dist 文件夹中，并且必须在模板文件中相应地引用它们。包本身很好，不需要进一步的配置。如果没有angular.json，它们将使用dist 中的自定义脚本复制，并以相同的方式在模板中引用。

标签： angular typescript npm webpack node-modules

【解决方案1】：

我在 GitHub 上为此创建了一个示例项目，请参见此处：https://github.com/tenkmilan/angular-scoped-package-with-image

在示例中，有一个作用域包，它位于@myscope 中，包的名称是scoped-package。在npm install 之后，可以在node_modules\@myscope\scoped-package\assets\images 路径上找到示例图像。

在angular.json 中添加到assets 的方式如下：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@myscope/scoped-package/assets",
    "output": "/assets/"
  }

在angular.json 中，这意味着./node_modules/@myscope/scoped-package/assets 的内容将放在assets 文件夹中的dist 文件夹中。如果我们运行npm run build 命令，我们可以看到它确实存在：

这就是为什么在 Angular 模板中必须以下列方式引用它：

<img src="assets/images/doge.jpg">

【讨论】：