跨延迟加载路由创建共享模块

我正在构建一个 Angular 11 应用程序并尝试创建一个SharedModule。我正在使用延迟加载，并希望避免在延迟加载的路由中多次加载公共模块。我创建了一个共享模块并将其导入到我的AppModule。根据我的理解，这个共享模块应该在所有延迟加载的模块中定义，而不需要在其他地方导入。但是，在我的延迟加载模块中，我因未直接导入共享模块而收到错误。如何全局定义我的 ProjectSharedModule？

我有我的共享模块：

@NgModule({
    declarations: [ProjectsComponent, TopNavComponent],
    imports: [
        ChartsModule,
        FormsModule,
        CommonModule,
        RouterModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatIconModule,
        MatInputModule,
        MatFormFieldModule,
        MatTooltipModule,
    ],

    exports: [
        ProjectsComponent,
        TopNavComponent,
        ChartsModule,
        FormsModule,
        CommonModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatIconModule,
        MatInputModule,
        MatFormFieldModule,
        MatTooltipModule,
    ],
})
export class ProjectSharedModule {}

这是我的应用程序模块

@NgModule({
    declarations: [AppComponent],
    imports: [
        ProjectSharedModule, // Shared Module should be defined globally 
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        FeaturesModule,
        LoggerModule
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthHttpInterceptor,
            multi: true,
        },
        { provide: LoggerBase, useClass: LoggerService },
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

这是延迟加载的模块：

@NgModule({
    declarations: [
        ...
        MyComponents
        ...
    ],
    imports: [
        RouterModule,
        ProfileRoutingModule,

        // Shouldn't need these anymore
        // CommonModule,
        // FormsModule,
        // MatDatepickerModule,
        // MatNativeDateModule,
        // MatIconModule,
        // MatInputModule,
        // MatFormFieldModule,
        // MatTableModule,
        // MatTooltipModule,

        // Without including this I get an error
        // ProjectSharedModule,
    ],
})
export class ProfileModule {}

这是延迟加载模块的路线

 {
        path: 'pr',
        loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule),
        canLoad: [AuthorizedUserGuard],
 },

同样，我如何在所有延迟加载的路由中共享我的 ProjectSharedModule？

UPDATE

看来我需要导入我的ProjectSharedModule在我的延迟加载模块中。根据本文 https://indepth.dev/avoiding-common-confusions-with-modules-in-angular它看起来像AppModule进口ProjectSharedModule这是被缓存的。当延迟加载的模块尝试导入它时，会从缓存中检索它，以防止运行时模块代码的重复。归功于这个答案 https://stackoverflow.com/a/47058314/6569899.

Your SharedModule需要在每个使用共享组件的模块中导入，无论它是否是延迟加载的。

UPDATE:如果您发现 ProfileModule 仅使用以下几个组件SharedModule，您可以将它们作为 ProfileModule 的一部分包含在内。 您可以做的另一件事是根据 SharedModule 的功能将其分成更小的 SharedModule，并仅导入需要的模块。

所以你的 profile.module.ts 应该是：

@NgModule({
    declarations: [
        ...
        MyComponents
        ...
    ],
    imports: [
        RouterModule,
        ProfileRoutingModule,
        SharedModule

        // Shouldn't need these anymore
        // CommonModule,
        // FormsModule,
        // MatDatepickerModule,
        // MatNativeDateModule,
        // MatIconModule,
        // MatInputModule,
        // MatFormFieldModule,
        // MatTableModule,
        // MatTooltipModule,

        // Without including this I get an error
        // ProjectSharedModule,
    ],
})
export class ProfileModule {}