构建角度库时包括资产

Question

我正在建立一个包含自定义图标字体的库。但是，当我使用ng build <library-name> --prod构建库时，资产文件夹未包含在构建中，这意味着在使用正式版本时不会显示图标。

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

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

我尝试过两种方式包含字体： 在其中一个样式文件中使用@import url( '../assets/icon_font.css' );，并在需要它的组件之一中将../assets/icon_font.css添加到styleUrls中。 （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文件夹中可用。

Answer 1

就像您在回答中所说的那样，不可能强迫打包程序将资产与构建文件一起打包。

现在，ng-packagr发布了一个新版本，该版本允许您将资产和构建文件包括在内：

您可以使用资产选项复制这些资产。

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

此处提供更多信息：https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

Answer 2

如前所述，angular library now support assets自 v9.x 角度。
但这在their website上并没有得到很好的解释。要使其正常工作，您必须：

1. 在您的图书馆项目的根目录中添加一个资产文件夹
   
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"
  }
}

1. ng build custom-project --prod。然后它会出现在您的dist文件夹中
   

然后，您可以在此文件夹中添加所需的内容

其他提示：在您的项目中使用它

然后，如果您希望将其用于导入项目中，请执行以下操作：

angular.json中的资产，js，样式

将这些文件添加到您的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'

Answer 3

看看github上的其他文章和问题，似乎没有办法强迫打包程序将资产与构建文件一起打包。我最终要做的是在将其部署到npm之前，将assets文件夹手动复制到dist文件夹。之后，我只需要告诉用户手动将@import icon_font.css插入他们的样式表之一即可。