构建 angular 库时包括资产

Question

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

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

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

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

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

在你的库项目的根目录下添加一个资产文件夹
将"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 库中不起作用，因此在更改后您可能需要手动编辑具有相对路径的资源导入

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'

构建 angular 库时包括资产

Include assets when building angular library

assets

angular-cli

angular

angular-library

ng-packagr

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

angular.json

Js 作为 app.module