Angular

Question

我有一个项目 my-components 和一个项目 my-showcase。 my-components 是一个 Angular 库，my-showcase 是一个 Angular 应用程序。有时，当我在库中更改或添加组件时，我会提交到 private git 并发布到 private npm。然后我可以在其他应用程序中使用它，例如 my-showcase。在提交和发布之前，我会对其进行测试。到目前为止，我在 my-showcase 中创建和开发了一个新组件。完成后，我将其放入my-components。

当时我通过 npm 导入我的 angular 组件库：

import {TimePickerModule} from '@company/components';

为了测试和开发，我将其更改为本地路径：

import {TimePickerModule} from '../../../../company-components/projects/components/src';

不幸的是，我收到以下错误消息：

WARNING in ../company-components/node_modules/@angular/core/fesm5/core.js 15153:15-36
Critical dependency: the request of a dependency is an expression

并且：

core.js:12584 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DcStickyBitsDirective -> ElementRef]:
  StaticInjectorError(Platform: core)[DcStickyBitsDirective -> ElementRef]:
    NullInjectorError: No provider for ElementRef!

显然，应用 my-showcase 中库中的组件使用了 my-components 中错误的 node_module 文件夹（特别是 @angular/core)，而不是 my-showcase.

中的 node_module 文件夹

在处理 Angular 库和 NPM 时，有没有人为我提供解决方案或者我的理解有误？如果太难理解，请告诉我。

Answer 1

我有一个解决方法。我将以下内容添加到 tsconfig.json:

"@company/components": [
    "../path/to/projects/components/src"
],

"@angular/*": [
    "node_modules/@angular/*"
]

但我觉得这个解决方案不是很干净。如果我理解正确，问题是 Webpack 从组件库而不是展示项目中获取 Angular 东西。使用此解决方法，它会覆盖错误的路径。

Angular - 将本地外部模块添加到应用程序

Angular - Add local external Module to App

typescript

npm

angular-library