构建角度库时包含资产

Posted 2023-03-06

【中文标题】构建角度库时包含资产

【英文标题】：Include assets when building angular library

【发布时间】：2020-01-04 13:16:13

【问题描述】：

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

我尝试了多种解决方案，例如在 angular.json 中添加 assets 数组并将 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 文件夹中可用。

【问题讨论】：

阅读内容：github.com/angular/angular-cli/issues/11071

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

是的，我将它包含在options 下，但是现在它给了我Schema validation 错误：Data path "" should NOT have additional properties(assets).

Assets 文件夹应仅包含在 Angular 应用中的 angular.json 项目中。对于图书馆，您将收到 @AivarasKriksciunas 的错误。您必须将其添加到目标库的ng-package.json项目文件夹下

您可以采取另一种方法：在库中包含图标，如显示此链接：netbasal.com/…

【参考方案1】：

正如已经说过的，angular library now support assets 自从 v9.x 的角度。 但在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"
  

提醒：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'

【讨论】：

是否可以从库项目的 node_modules 文件夹中复制资产？我试过 "assets": ["../../node_modules/@foo/core/assets"] 但没有运气。我希望它会在 dist/ 下创建一个“assets”文件夹并从 foo.xml 复制所有资产。通过将资产配置添加到 angular.json 中 angular-devkit/build-angular:browser 的 build/builder/options 中，这适用于普通 Angular 项目。

@rbalet 看起来像 Angular 6 后，使用您给出的语法，如果它们不在 src 目录中，则无法从节点模块添加资产。而不是字符串路径，你必须把这个对象放在资产数组中： "glob": "**/*", "input": "./node_modules/module_name/assets", "output": "./assets"

@Nirmal，谢谢我更新了答案。 @Eric，现在应该可以工作了，别忘了将它添加到production下的资产下

该解决方案有效，但在使用 CLI 创建的 Angular 库中，资产文件夹位于 src 文件夹内，而不是同一级别。我不明白在 Angular 中复制不符合默认文件夹结构的资产的解决方案。这当然不是你的错，只是说这似乎是 Angular 或 ng-package 团队的一个糟糕的设计决定。

@Raphaël Balet 这行得通，但是我在 scss 样式文件的导入语句中遇到错误问题。如何解决这个问题？我尝试将以下内容添加到 tsconfig.lib.json -> compilerOptions -> 路径： "assets": ["./assets"] 并且还尝试了 "assets/*": ["./assets/*"] 但不起作用

【参考方案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

【讨论】：

如果它提供了这些行的上下文，这个答案会更有用。什么文件？文件在哪里？

你的 Angular 库中应该有一个 ng-package.json 文件。这是您的包装商的信息

感谢@yntelectual 提供了我们应该应用修复的位置。

之后如何在子项目中导入theme.scss？

【参考方案3】：

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

【讨论】：

您在库代码中提到的访问库中存在的资产的源路径是什么？您在 dist 文件夹中将资产准确复制到哪里？你能帮忙吗？

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