如何从库导入组件（在带有 Angular 的 nrwl/nx 中）

Question

我想将PageNotFoundComponent我的ui-components库中的内容导入到我的应用程序的路由器中。

当我将 导入UiComponentsModule到 myAppModule并使用模板中的组件时，一切正常，但以 es6 表示法导入组件失败。

/libs/ui-components/src/lib/ui-components.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ContactCardComponent } from './contact-card/contact-card.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { WhiteLabelFooterComponent } from './white-label-footer/white-label-footer.component';
import { WhiteLabelHeaderComponent } from './white-label-header/white-label-header.component';

@NgModule({
  declarations: [
    ContactCardComponent,
    WhiteLabelFooterComponent,
    WhiteLabelHeaderComponent,
    NotFoundComponent
  ],
  exports: [
    ContactCardComponent,
    WhiteLabelFooterComponent,
    WhiteLabelHeaderComponent,
    NotFoundComponent
  ],
  imports: [CommonModule],
})
export class UiComponentsModule {}

/apps/myApp/src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NotFoundComponent } from 'libs/ui-components/src/lib/not-found/not-found.component';

const routes: Routes = [
  {
    path: '**',
    component: NotFoundComponent,
  },
];

@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(routes)],
})
export class AppRoutingModule {}

通过像这样的导入，import { NotFoundComponent } from 'libs/ui-components/src/lib/not-found/not-found.component';我得到了 linter 错误：

库导入必须以 @frontend/ (nx-enforce-module-boundaries)tslint(1) 开头，不允许从此包中导入子模块路径；改为从根导入 (no-submodule-imports)tslint(1) 模块“libs”未在 package.json 中列为依赖项（无隐式依赖项）tslint(1)

当我将导入更改为时，import { NotFoundComponent } from '@frontend/ui-components';我收到错误：

模块 '"../../../../../../../../../Users/LeitgebF/Projects/KLAITONWeb/frontend/libs/ui-components/src"' 具有没有导出成员“NotFoundComponent”.ts(2305)

那么如何直接从 Nx 中的库导入组件呢？

Answer 1

我也必须将所需的组件添加到我的桶文件中。这是直接来自 github repo 支持的答案：https ://github.com/nrwl/nx/issues/1533

我不明白为什么我需要 Angular 模块，但我创建了它并导出了桶文件中的其他组件。