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

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

应用程序模块.ts

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


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

应用程序路由.ts

const appRoutes: Routes = [

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

惰性模块.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 以便能够在惰性模块（以及非惰性组件）中使用它？

提前致谢，

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

Add FpgTimeComponent to a SharedModule并导入SharedModule在你的LazyModule，或移动FpgTimeComponent给你的LazyModule。一旦你做了其中之一，它就应该起作用了。

前者可能是更好的方法，因为我可以保证，随着您继续开发，您将继续遇到与其他组件/惰性模块相同的错误。如果您在多个地方使用这些组件，那么它们应该位于一个SharedModule as Angular 最佳实践定义 https://angular.io/guide/sharing-ngmodules， 然后SharedModule应该导入到所有惰性模块中。

这是一个例子。

共享模块：

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

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

惰性模块：

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

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

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