如何从库中导入组件（在 nrwl/nx 中使用 Angular）

Posted 2023-03-23

【中文标题】如何从库中导入组件（在 nrwl/nx 中使用 Angular）

【英文标题】：How to import a component from a library (in nrwl/nx with Angular)

【发布时间】：2019-11-10 08:47:20

【问题描述】：

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

当我将 UiComponentsModule 导入到我的 AppModule 并使用模板中的组件时，一切正常，但以 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 中的依赖项 (no-implicit-dependencies)tslint(1)

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

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

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

【参考方案1】：

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

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

【讨论】：

你找到了为什么要导入 ngModules 的答案吗？我和你在 github 有同样的问题。