在延迟加载的模块中使用Angular组件

Question

我想在我的应用程序的几个部分中使用Angular组件,包括在延迟加载的模块中的组件中.我不知道如何声明组件在惰性模块中使用它.我将向您展示不同文件的一些相关部分:

app.module.ts

import { FpgTimeComponent } from './fpgTime/fpg-time.component';


@NgModule({
  declarations: [
      AppComponent, 
      (...)
      FpgTimeComponent

app.routing.ts

const appRoutes: Routes = [

    { path: '', redirectTo: 'customer', pathMatch: 'full' },
    {
        path: 'customer',
        component: CustomerComponent
    },
    {
        path: 'lazy',
        loadChildren: 'app/lazy/lazy.module#LazyModule'
    }
];

lazy.module.ts

import { FpgTimeComponent } from '../fpgTime/fpg-time.component';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [routing],
    declarations: [
        LazyComponent, 
        FpgTimeComponent
    ]
})

该应用程序加载,但当我进入惰性路由时,它会抛出以下错误:

未捕获(承诺):错误:类型FpgTimeComponent是2个模块的声明的一部分:AppModule和LazyModule!请考虑将FpgTimeComponent移动到导入AppModule和LazyModule的更高模块.您还可以创建一个新的NgModule,它导出并包含FpgTimeComponent,然后在AppModule和LazyModule中导入该NgModule.

我没有在任何地方导入LazyModule,因为它是懒惰加载的.那么,我如何声明组件FpgTimeComponent能够在惰性模块(以及非惰性组件)中使用它？

提前致谢,

Answer 1

FpgTimeComponent不是将要加载的延迟模块的文件的一部分,所以你不能这样做.考虑一下,你试图在懒惰模块中导入一个组件,模块一无所知,因为它没有在那个模块中定义,并且它没有在你导入的任何其他模块中定义LazyModule.那么从哪里获取组件？

添加FpgTimeComponent到SharedModule并导入SharedModule您的LazyModule,或移动FpgTimeComponent到您的LazyModule.一旦你做了其中之一,它应该工作.

无论如何,这是一种更好的方法,因为我可以保证,随着您的不断开发,您将与其他组件/其他惰性模块保持同样的错误.如果您在多个位置使用组件,那么它们应该SharedModule以Angular最佳实践定义的方式存在,并且SharedModule应该在所有惰性模块中导入.

这是一个例子.

SharedModule:

import { FpgTimeComponent } from './some/path';

@NgModule({
    declarations: [
        FpgTimeComponent
    ],
    exports: [
        FpgTimeComponent
    ]
})

LazyModule:

import { SharedModule } from '../shared/shared.module';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [
        routing,
        SharedModule
    ],
    declarations: [
        LazyComponent
    ]
})