Why doesn't shared module import fall through?

Question

I have a small angular application that makes use of the CoreModule and SharedModule pattern. Because my application is quite small at the moment, I have imported the SharedModule in the root module, AppModule. I also have a lazy loaded admin module called AdminModule but it seems like it does not have access to shared module even though it has been imported in the root module. I have to explicitly import the SharedModule again in order to use it inside the components of the admin module. Why is this? If I have to re-import them again inside each lazy loaded module, what's the point of importing them in the root module?

AppModule

...
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatExpansionModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule, // imports firebase/storage only needed for storage features
    SharedModule, // To be imported on each feature module, instead of AppModule. For now, this is fine though
    CoreModule,
    HttpClientModule
  ],
...

App routing module (Lazy loaded)

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule',
    canActivate: [AdminAuthGuard]
  }]

AdminModule

...
imports: [CommonModule, AdminRoutingModule, SharedModule, CoreModule],

An example is if I have a footer component inside the SharedModule and try to use it in my AdminHomeComponent which is a part of the AdminModule, I get an error (without importing the SharedModule). All works fine when I import it.

Without posting the relevant code it is impossible for us to help you :( — lealceldeiro, Sep 23 '19 at 09:02
You only imported those module in the shared module which is only available to its child. You have to export the modules and not import — Okere Chukwudi, Sep 23 '19 at 09:11

score 2 · Accepted Answer · answered Sep 23 '19 at 09:12

Importing a Module lets the components of the module that imports the external module, to be able to see the components from that imported module. But only the ones in that module, not in the nested ones.

Importing a module in the root module is useful for PROVIDERS, that's quite different from Components.

If you import a Module that provides a service in a module, all the components from that module and the nested modules will be able to see the providers. (this is the reason why it's a good practice to put the providers of a module only in a static forRoot() method if the module has providers and components that will be reused).

Ah that makes much more sense. I was mistakenly thinking that once imported in a parent module, all the children would be able to access them. Thanks for the clarification!! — Seane, Sep 23 '19 at 09:29

score 0 · Answer 2 · answered Sep 23 '19 at 09:32

I also found this great answer on another post https://stackoverflow.com/a/43153529/8948458

The minute you create a new module, lazy or not, any new module and you declare anything into it, that new module has a clean state. It has no knowledge of anything,

Why doesn't shared module import fall through?

2 Answers2