Shared module imported in AppModule

user_5784743 0
Viewed 6254

I was reading the Angular documentation about modules, looking for a line that discourages importing a SharedModule inside the AppModule.

I didn't find anything about that, just a GitHub issue which states that it's better not to import it. However without any deep explain...

https://github.com/tomastrajan/angular-ngrx-material-starter/issues/47

Angular discourages providing services in the Shared modules, which indeed I agree. But nothing else.

So my question is:

Since all my feature modules are lazy-loaded, and needs to import the shared module, but also my app component needs to use stuff provided by the same shared module, is it a bad practice to import it into the AppModule?

What may the consequences be?

Thanks in advance to anyone

angular javascript
3 Answers

The problem with importing a SharedModule into the AppModule is that the providers will be injected twice in the feature modules (once by the SharedModule, once by the AppModule) which will result in the services not being singletons as they are supposed to be.

The common pattern to achieve that is not to expose providers directly on the @NgModule declaration but in a static forRoot function (the name is not mandatory, it's a convention) like that:

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
         ...
      ]
    };
  }
}

When importing the SharedModule into AppModule, use SharedModule.forRoot(), when you import it in a feature module just import it as SharedModule

user_37381710

Just have a look in this link shared module its not a bad practice to import your shared module in AppModule

Shared module is all about having common modules like if you have form module some module which is needed on all your modules instead of importing in all modules you can import it in shared module and export the same - check the link for further clarification

For service it can be injected just in one module the AppModule - Services are injectable and can be used in any module if it has been injected in root module

@Injectable({
    providedIn: 'root'
})

Use this decorator in your service top it will automatically inject your service in root module

Thanks - Happy coding !!

user_83986300

As long as you avoid declaring services inside your shared module, I don't see any problem with it.

user_78157790
Related