Creating Shared Module across lazy loaded routes

Question

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?

I have my shared module:

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

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

Here is the module that gets lazy-loaded:

@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],
 },

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

UPDATE

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.

Useme Alehosaini · Accepted Answer · 2020-11-25 14:29:30Z

2

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

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.

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

edited Nov 25, 2020 at 14:29

answered Nov 25, 2020 at 14:23

Useme Alehosaini

3,1266 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

afriedman111 Over a year ago

Is there a way to easily detect how many times a module is loaded?

Useme Alehosaini Over a year ago

Well, I afraid I did not understand your question. But the lazy loading benefit is showing in production, so itself and any imported module in it will be loaded once itself is loaded.

Useme Alehosaini Over a year ago

By the way, I updated my answer with options you can do to work around

afriedman111 Over a year ago

Is there a way to profile the lazy loading? Like in Chrome Web Kit

Useme Alehosaini Over a year ago

Generally, I use Chrome Network debugging to see the bundles loaded

|

Collectives™ on Stack Overflow

Creating Shared Module across lazy loaded routes

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related