Question

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

当我通过npm导入我的角度分量库时：

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），而不是使用了错误的node_module文件夹。 我的展示柜。

在处理Angular Library和NPM时，有人对我有解决方案还是对我的理解有误？如果太难以理解，请告诉我。

Answer 1

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

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

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

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

Angular-将本地外部模块添加到App

1 个答案: