我想将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 的库中导入组件呢?