如何从库中导入组件(在Angular中为nrwl / nx)

时间:2019-06-28 11:29:18

标签: angular typescript nrwl nrwl-nx

我想将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)模块“库”未列出为   package.json中的依赖关系(无隐式依赖关系)tslint(1)

当我将导入更改为import { NotFoundComponent } from '@frontend/ui-components';时,我得到了错误:

  

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

那我如何直接从Nx中的库导入组件?

1 个答案:

答案 0 :(得分:0)

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

我并不理解,为什么我需要Angular模块,但是我创建了它并且还导出了bucket文件中的其他组件。