Angular MonoRepo Nx - 在应用程序中使用库

Question

情况：我对 Angular 很陌生，想创建一个包含多个应用程序和库的 Angular 工作区。 我按照本教程使用 Nx 以 MonoRepo 的形式创建了一个 Angular 工作区。 我按照教程中介绍的步骤创建了一个应用程序和一个库。

所以我有一个名为 first-app 的应用程序和一个名为 first-lib 的库。 在 first-lib 中，我有一个组件 first-lib-component。 我想在我的第一个应用程序 html 中像这样使用组件或最好的库本身：

<h2> This is my first-app </h2>
<first-lib></first-lib> OR
<first-lib-component></first-lib-component>

我在 app.module.ts 中导入了 first-lib 并将 first-lib-module 添加到导入中。

问题：我想在我创建的应用程序中使用创建的库，这就是我目前失败的地方。 我收到一条错误消息，指出“'first-lib-component' 不是已知元素”。

Nx 网站指出：

...库的客户端在同一个存储库中，因此不需要打包和发布步骤。

如果不需要打包，我如何使用我的共享组件/项目（库）？

我的问题：如何在应用程序中导入和使用库（的组件）？

Answer 1

该组件需要添加到模块中并导出，然后该模块需要导入到您的应用程序中。

Answer 2

说 nx 没有用的评论再错误不过了。 无论如何，让我们现在帮助你。

如果您构建多个组件，您将需要做出决定：

a) 每次导入库时导入所有组件：

// libs/first-lib/src/lib/first-lib.module.ts

@NgModule({
  imports: [CommonModule, FirstLibComponent, SecondLibComponent],
  exports: [FirstLibComponent, SecondLibComponent]
})
export class FirstLibModule {}

// libs/first-lib/src/index.ts

export * from ./lib/first-lib.module

// tsconfig.base.json

"paths": {
  "@my-repo/first-lib": ["libs/first-lib/src/index.ts"],
}

// apps/app1/src/app/app.module.ts

import {FirstLibModule} from '@my-repo/first-lib'

b) 单独导入每个组件

假设你的每个组件都有一个 NgModule，那么可以简单地导出模块文件。 如果您遵循此路线，请记住删除您放置在 FirstLibModule 中的导出和导入。

// libs/first-lib/src/lib/first-lib.module.ts

@NgModule({
  imports: [CommonModule]
})
export class FirstLibModule {}

// libs/first-lib/src/index.ts

export * from ./lib/first-lib.module
export * from ./lib/first-component.module
export * from ./lib/second-component.module

// apps/app1/src/app/app.module.ts

import {FirstComponentModule, SecondComponentModule} from '@my-repo/first-lib'

我假设您没有独立的组件来使这个答案简短。 如果您有这种情况，请在下面发表评论，那么我将有理由涵盖它们。