在延迟加载的模块中使用 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 的更高模块和 懒惰模块。你也可以创建一个新的 NgModule 来导出和 包括 FpgTimeComponent 然后在 AppModule 中导入该 NgModule 和 懒惰模块。

我没有在任何地方导入 LazyModule，因为它是延迟加载的。那么，我如何声明组件 FpgTimeComponent 以便能够在惰性模块中（以及在非惰性组件中）使用它？

提前致谢，

Answer 1

FpgTimeComponent 不是将要加载的惰性模块文件的一部分，所以你不能这样做。想一想，您正试图在惰性模块中导入一个组件，该模块对此一无所知，因为它没有在该模块中定义，也没有在您在LazyModule 中导入的任何其他模块中定义。那么它从哪里获取组件呢？

将FpgTimeComponent 添加到SharedModule 并将SharedModule 导入您的LazyModule，或将FpgTimeComponent 移动到您的LazyModule。一旦你做了其中之一，它应该就可以工作了。

前者可能是更好的方法，因为我可以保证，随着您不断开发，您将继续遇到与其他组件/惰性模块相同的错误。如果你在多个地方使用组件，那么它们应该像 Angular best practices defines 一样存在于 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
    ]
})