跨延迟加载的路由创建共享模块 [英] Creating Shared Module across lazy loaded routes

问题描述

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

I am building an Angular 11 application and am trying to create a SharedModule. I am using lazy loading and wish to avoid loading common modules multiple times across my lazy loaded routes. I created a shared module and imported that into my AppModule. From my understanding, this shared module should be defined across all lazy-loaded module and not need to be imported anywhere else. However, in my lazy-loaded module, I get an error for not directly importing my shared module. How do I globally define my 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

Here is my 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 {}

这里是懒加载模块的路由

Here is the route that lazy loads the module

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

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

Again, how do I share my ProjectSharedModule across all of my lazy loaded routes?

更新

看来我需要在我的延迟加载模块中导入我的 ProjectSharedModule.根据这篇文章，它看起来像AppModule 导入缓存的 ProjectSharedModule.当延迟加载的模块然后尝试导入它时，它会从缓存中检索，以防止在运行时重复模块代码.感谢这个答案.

It appears that I need to import my ProjectSharedModule in my lazy loaded module. According to 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 this answer.

推荐答案

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

Your SharedModule needs to be imported in every module use the shared components, no matter if it is lazy-loaded or not.

更新:如果您发现 ProfileModule 仅使用了 SharedModule 的几个组件，您可以将它们作为 ProfileModule 的一部分包含在内.您可以做的另一件事是根据功能将 SharedModule 分成更小的 SharedModule，然后只导入需要的.

UPDATE: If you find the ProfileModule using only a few components of SharedModule, you can include them as a part of ProfileModule. The other thing you can do is dividing the SharedModule into smaller SharedModules according to their functions and import the one needed only.

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

So your profile.module.ts should be:

@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 {}

这篇关于跨延迟加载的路由创建共享模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！