构建Angular库时包含资源文件

Question

我正在构建一个包含自定义图标字体的库。然而，当我使用ng build <library-name> --prod 构建我的库时，资源文件夹没有被包括在构建中，这意味着在生产环境下库中的图标将不会显示。

我尝试了多种解决方案，如在 angular.json 中添加 assets 数组，并将 assets 文件夹复制到创建的 dist 文件夹中。

我正在使用 Angular 8，并且该库是使用 angular-cli 创建的。

我尝试了两种方式引入字体：一种是在一个样式文件中使用 @import url( '../assets/icon_font.css' );，另一种是在需要它的组件的 styleUrls 中添加 ../assets/icon_font.css。（icon_font.css 是包含图标字体的 css 文件）

这是我的库目录结构：

- src
  - lib
    - assets
      - icon_font.css
      - font files
    - component that requires icons
      - style sheet that has @import icon_font.css
    - other components and classes

我希望将 assets/ 目录中的 .ttf 以及其他字体文件在导出的 dist 文件夹中也能使用。

- Aivaras Kriksciunas

---

阅读材料：https://github.com/angular/angular-cli/issues/11071 - R. Richards

assets文件夹是否包含在angular.json中？ - Reza

是的，我已将其包含在“选项”下，但现在它给了我“模式验证”错误：“数据路径""不应具有其他属性(assets)。” - Aivaras Kriksciunas

资产文件夹应该仅在 Angular 应用程序中包含在 angular.json 项目中。对于库，您将收到 @AivarasKriksciunas 的错误。您需要在目标库的 ng-package.json 中添加它，位于 projects 文件夹 下。 - Raphaël Balet

你可以采取另一种方法：将图标包含在库中，就像这个链接所示：https://netbasal.com/elegantly-manage-svg-icons-in-angular-applications-5adde68a5c46 - Eliseo

Answer 1

正如已经说过的，angular库现在支持assets自angular v9.x版本以来。
但是官网没有很好地解释。要使其工作，您需要执行以下操作：

1. 在库项目的根目录下添加一个assets文件夹
   
2. 将"assets": ["./assets"],添加到库的ng-package.json文件中

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/icon",
  "assets": ["./assets"], // <-- Add it here
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

提醒：在Angular库中，tsconfig.lib.json路径无法工作，因此更改后，您可能需要手动编辑相对路径的资产导入。

3. 运行ng build custom-project --prod，然后它将出现在您的dist文件夹中。

然后，您只需向此文件夹添加所需内容即可。

额外提示：在项目中使用它

然后，如果您希望在导入到其中的项目中使用它，请执行以下操作：

资产、js、styles在angular.json中

将这些文件添加到您的angular.json文件中。

 {
   /*...*/
   "assets": [ // Import every assets
     {
       "glob": "**/*",
       "input": "./node_modules/custom-project/assets",
       "output": "/assets/"
     }
   ],
   "styles" : [ // Only custom css
     "node_modules/custom-project/assets/my-css-file.css"
   ],
   "scripts" : [
     "node_modules/custom-project/assets/my-js-file.js"
   ]
 }

将Js作为app.module的一部分

您还可以直接将js添加到子文件中即使我不确定它是否真正地懒加载了这些文件。
例如，将其导入到您的home.module.ts文件中。

 import 'custom-project/assets/my-js-file.js'

- Raphaël Balet

---

看起来是在Angular 6之后，使用您给出的语法，如果节点模块中的资产不在src目录中，则无法添加。您必须将此对象放入资产数组而不是字符串路径：{ "glob": "**/*", "input": "./node_modules/module_name/assets", "output": "./assets" }@rbalet - Nirmal

该解决方案可行，但在使用CLI创建的Angular库中，资产文件夹位于src文件夹内部，而不是同一级别。我不明白为什么要提供一个与默认文件夹结构不兼容的Angular资产复制解决方案。当然，这不是你的错，只是说这似乎是Angular或ng-package团队的一个糟糕的设计决策。 - Dani P.

@Raphaël Balet 这个方法有效，但是我遇到了导入scss样式文件时的错误问题。如何解决呢？我尝试在tsconfig.lib.json -> compilerOptions -> paths中添加以下内容：“assets”: [“./assets”]，还尝试了“assets/*”：[“./assets/*”]，但都不起作用。 - Noy Oliel

@olNoy 库无法使用 tsconfig.lib.json 的路径，问题在于只有主项目被接受，因此你必须像我一样移动“assets”文件夹到项目直接下。所以，如果你想让它正常工作，就必须按照我的指示去做。_或者我可能误解了你尝试实现的内容_。 - Raphaël Balet

嘿，非常感谢您的回复，但是我尝试了很多选项，我看到资产被添加到“dist”文件夹中，但是当在Angular项目中导入lib以查看图像时，它们没有被找到，老实说，我不知道为什么或者在开发angular lib并将其导入项目（还不是作为包）时是否应该显示。 也许我做错了什么，但我不知道是什么 :( - Mihai

Answer 2

就像你在回答中所说的那样，无法强制打包程序将资源与构建文件一起打包。

现在，ng-packagr发布了一个新版本，允许你将资源与构建文件一起包含:

你可以使用assets选项来复制这些资源。

编辑库中的 ng-package.json 文件（如果您使用多项目工作区，则为 projects/<your-lib>/ng-package.json 文件）以定义应包含哪些资产：

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

更多信息在这里：https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

- German Quinteros

---

如果提供这些行的上下文，这个答案会更有用。是哪个文件？在文件中的什么位置？ - theMayer

你的 Angular 库中应该有一个名为 ng-package.json 的文件。它是打包工具的相关信息。 - Shishibi

感谢 @yntelectual 提供了修复应该应用的位置。 - German Quinteros

在子项目中如何导入 theme.scss？ - Hasan Can Saral

Answer 3

从GitHub上的其他帖子和问题来看，似乎没有办法强制打包程序将资产与构建文件一起打包。我最终选择在部署到npm之前手动将assets文件夹复制到dist文件夹中。之后，我只需要告诉用户手动将icon_font.css导入到其中一个样式表中即可。

- Aivaras Kriksciunas

---

你的库代码中提到的源路径是什么，用于访问库中存在的资源？你确切地将资产复制到了dist文件夹的哪个位置？你能帮忙吗？ - Mehul Parmar

这个功能是在ng-packager v9.x及更高版本中添加的。对于较低版本，您必须手动复制。 - Aamer Shahzad