angular - 构建 Angular 库时包含 Assets

Question

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

我尝试了多种解决方案，例如添加 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

如前所述，angular library now support assets自 v9.x 的 Angular 。
但是在their website上没有很好的解释.为了让它工作，你必须:

在你的库项目的根目录添加一个 assets 文件夹

添加 "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"
  }
}

ng build custom-project --prod .然后它出现在你的 dist 文件夹中

然后你可以在这个文件夹中添加你想要的
附加提示:在您的项目中使用它
然后，如果您希望将其用于导入到的项目中，请执行以下操作:
angular.json 中的 Assets 、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'