首页 > 解决方案 > 如何在使用 CLI 创建的 Angular 库中包含第三方模块

问题描述

我想在使用 CLIgenerate library命令创建的 Angular 库中使用 Pure.css 模块。

我有一个工作区应用程序,我在其中运行了generate library创建库的命令。该库已成功创建,我能够链接它并将其安装在不同的项目中。但是我想使用 Pure.css 库中的网格系统,在工作区应用程序的 angular.json 文件(包含库的文件)中,我在库项目的构建配置中有样式条目,例如。

"styles": [
   "node_modules/purecss/build/pure-min.css",
   "node_modules/purecss/build/grids-responsive-min.css"
]

在一个库的组件中,我有一个使用 Pure.css 规则的标记,例如

<div class="pure-g">
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

但是当我在外部项目中使用该组件时,很明显没有应用样式。

所以我在各个组件的 .css 文件中导入了 Pure.css 样式文件,比如

@import url("node_modules/purecss/build/pure-min.css");
@import url("node_modules/purecss/build/grids-responsive-min.css");

这可行,但我希望 Pure.css 库中的样式包含在整个库中,而不是一个组件。

有没有办法实现这一点,我做了一些搜索,但找不到任何资源,是否可以配置将ng-packagr样式包含在库的构建中?

我正在使用package.json文件中定义的脚本从包含的工作区项目构建库,例如

"build:lib": "ng-packagr -p projects/my-library-project/package.json"

我一般如何将第三方模块安装到库项目中,我是否通过工作区项目安装它们?

任何帮助表示赞赏,谢谢。

标签: angularangular-cli-v6ng-packagr

解决方案


您可以在 tsconfig.json 中导入第三方库

"paths": {
  "example-ng6-lib": [
    "dist/example-ng6-lib"
  ]
}

推荐阅读