Angular4. How to declare components/import modules for lazy loaded submodules?

Question

For now for each rout of my app I am loading exact module. Here is how I am doing that :

const routes: Routes = [
    {
        path: '',
        loadChildren: './pages/site-index/site-index-routing.module#SiteIndexRoutingModule'
    }
    {
        path: 'account',
        loadChildren: './pages/site-account/site-account-routing.module#SiteAccountRoutingModule'
    }
];

If I declare the following components : HeaderComponent, MenuComponent, FooterComponent in app.module.ts like that :

const BASE_COMPONENTS: any[] = [
    HeaderComponent,
    FooterComponent,
    MenuComponent
];



@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        ...BASE_COMPONENTS
    ],
    bootstrap: [ AppComponent ]
})

My SiteIndexComponent and the rest components which were lazy-loaded cry that they do not know HeaderComponent, FooterComponent, MenuComponent and ask to declare them.

But!

If I declare HeaderComponent, FooterComponent, MenuComponent both in SiteIndexModule and SiteAccountModule - these cry that HeaderComponent, FooterComponent, MenuComponent were declared in two places and ask to declare in any module above containing SiteIndexModule and SiteAccountModule

P.S. If I declare HeaderComponent, FooterComponent, MenuComponent only in SiteIndexModule and do not use these by SiteAccountModule - everything is ok. The problem is only when I'd like to use HeaderComponent, FooterComponent, MenuComponent in several lazy-loaded modules.

How can I resolve my problem?

thanks

joshrathke · Accepted Answer · 2017-07-22T17:55:23.070

The best way to do something like this where you are using the same components in several modules, is to use a shared module and import it into the sub-modules you need to use the components in.

The Angular Docs do a pretty good job of explaining how it works. There are also TONS of resources regarding the use of 'Shared' modules online. I will say that if you get into the habit of sharing singelton services, it's worth your time to research exactly how services work, espeically within the context of lazy loaded modules.

This gist though is that you have a /shared folder in your root app directory with a shared.module.ts module in it, along with all of the components, directives, services, etc.. you want to share. The trick here is that along with importing them into the shared.module.ts, you also export them out so other modules that use the shared module gain access to them. Then when you want to use any of those within a module, you import the shared module.

src/app/src/app/shared/shared.module.ts

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';
import { FormsModule }         from '@angular/forms';

import { FooterComponent }  from './PATH-TO-FILE';
import { HeaderComponent }  from './PATH-TO-FILE';
import { MenuCompoonent } from './PATH-TO-FILE';

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ HeaderComponent, FooterComponent, MenuComponent ],
  exports:      [ HeaderComponent, FooterComponent, MenuComponent
                  CommonModule, FormsModule ]
})
export class SharedModule { }

could you add a `` [syntax highlighting hint](https://meta.stackexchange.com/questions/184108/what-is-syntax-highlighting-and-how-does-it-work) to make your code more readable :) — 0mpurdy, Jul 22 '17 at 14:00
@0mpurdy I didn't know about this ``; thanks for sharing. Where does it go? at the top of the code block I presume? — BeetleJuice, Jul 22 '17 at 15:10
No problem! Yes it's above the code block - there is more detail at the link in my previous comment — 0mpurdy, Jul 22 '17 at 15:14

Angular4. How to declare components/import modules for lazy loaded submodules?

1 Answers1

Linked