【问题标题】:How to include third party modules in an Angular library created using the CLI如何在使用 CLI 创建的 Angular 库中包含第三方模块
【发布时间】:2019-02-13 15:10:55
【问题描述】:

我想在使用 CLI generate 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"

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

感谢任何帮助,谢谢。

【问题讨论】:

  • 在你的库中暴露第三方库是个坏主意。只需在使用您的库的项目中添加此库并在库的 peerDependencies 中提及依赖项
  • 好的,谢谢,我想我明白你的意思了。
  • 这就是我害怕的。您不能仅通过导入来交付封装和工作的库,您必须对使用该库的开发人员进行一些进一步的配置:(
  • @smnbbrv 现在我完全理解为什么你说在我的库中公开第三方库是个坏主意,但我应该使用 peerDependencies,然后 NPM 将使用库的 package.json(peerDependency ) 如果消费项目或另一个第三方包使用的包版本与我的库所需的版本不同,则解决消费项目中的第 3 方包(如果存在这些冲突,NPM 将发出警告,否则它将安装在我的库的 peerDependencies 中定义的第三方包的版本)。再次感谢。
  • 不客气 :) 很好,它有帮助。几年前我确实遇到了同样的问题,但仍然为此付出了代价。生活很糟糕:D

标签: angular angular-cli-v6 ng-packagr


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2021-02-27
    • 1970-01-01
    • 1970-01-01
    • 2019-08-05
    • 2019-05-27
    • 2017-11-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多