How does a lazy loaded module inherit application module declarations?
I have a lazy loaded module that a component needs to use. I added it to my app module declarations and expect it to make the app declared component wide.
Although Angular cannot recognize component in lazy loaded module . I tried to add it to both module declarations and got a warning asking me to add the declaration to the higher module above app.module
and lazyLoaded.module
.
eg. ( nameOfModule/Component
)
Error: The type (DeclareMeComponent) is part of the declarations of two modules: (AppModule) and (LazyLoadedModule)! Please consider moving (DeclareMeComponent) to a taller module that imports AppModule and (LazyLoadedModule). You can also create a new NgModule that exports and includes (DeclareMeComponent), then imports this NgModule in (AppModule) and (DeclareMeComponent).
What is higher than app.module
? and how can I force the lazy loaded module to inherit / use the declared component along with the app module ?
source to share
The higher it AppModule
will be SharedModule
. Here you can define the components that you will use in yours AppModule
and inside any lazy loadable modules.
@NgModule({
imports: [
CommonModule
],
declarations: [
DeclareMeComponent
],
exports: [
DeclareMeComponent,
CommonModule
]
})
export class SharedModule {}
This is where you will declare and export components, directives, pipes, the entire shebang. Basic building blocks that you will use throughout your application. You can also import and export here CommonModule
. It looks like BrowserModule
but then you can import more than once into the app.
Now you can use your shared component inside yours AppModule
and any other module by importing it.
@NgModule({
imports: [
BrowserModule,
SharedModule
]
})
export class AppModule {}
As you can see, there is no need to declare DeclareMeComponent
internally AppModule
, because it is imported from higherSharedModule
source to share