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

Creating Shared Module across lazy loaded routes

我正在构建一个 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 {}

这是我的 AppModule

@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?

更新

看来我需要在延迟加载的模块中导入 ProjectSharedModule。根据this article it looks like the AppModule imports the ProjectSharedModule which is cached. When the lazy loaded module then tries to import it, it is retrieved from the cache to save from duplication of a module code in runtime. Credit to .

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

更新: 如果您发现 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 {}