构建角度库时包含资产

Question

我正在构建一个包含自定义图标字体的库。但是，当我使用

ng build <library-name> --prod

构建库时，资产文件夹不包含在构建中，这意味着使用生产构建时不会显示图标。

我尝试了多种解决方案，例如在

assets

中添加

angular.json

数组并将 asset 文件夹复制到创建的 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 的 v9.x 以来，Angular 库现在支持资产。 但在
他们的网站上并没有很好的解释。要使其发挥作用，您必须：

在库项目的根目录添加资产文件夹
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"
  }
}

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

3. 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 2

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

现在，

ng-packagr发布了一个新版本，允许您将资产与构建文件一起包含：

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

编辑库中的

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

Answer 3

查看 github 上的其他帖子和问题，似乎没有办法强制打包器将资源与构建文件一起打包。我最终所做的是将

assets

 文件夹手动复制到 

dist

 文件夹，然后再将其部署到 npm。之后，我只需告诉用户手动 

@import

 将 

icon_font.css

 放入他们的样式表之一。

Answer 4

我正在使用 Angular v16.x 和 ng-packagr v16.x。 我为我的项目创建了一个库，并尝试构建它，但遇到了同样的问题。以下解决方案对我有用：

1. 在我的项目下的根目录中添加了资产文件夹。

2. 在项目的 ng-package.json 文件中，我在

   lib 对象中添加了“styleIncludePaths”字段。

   “styleInincludePaths”：[“./assets/styles”]