CODEWITHSUNDEEP
javascriptangulartypescriptimportmodule
Seane
Seane

Reputation: 41

Why doesn't shared module import fall through?

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.

Upvotes: 3

Views: 164

Answers (2)

Seane
Seane

Reputation: 41

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,

Upvotes: 0

Pau Mascarell
Pau Mascarell

Reputation: 128

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).

Upvotes: 2

Related Questions