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

1 answer

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.

  imports: [
  declarations: [
  exports: [
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.

  imports: [
export class AppModule {}


As you can see, there is no need to declare DeclareMeComponent

internally AppModule

, because it is imported from higherSharedModule



All Articles