javascript - Shared module imported in AppModule - Stack Overflow

admin管理员组

文章数量:1298419

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

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

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

• javascript
• angular

Share Improve this question Follow edited Aug 20, 2021 at 10:09 Guerric P 31.8k66 gold badges5858 silver badges104104 bronze badges asked Nov 7, 2018 at 9:16 CaiusCaius 2,26477 gold badges3434 silver badges5353 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 15

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

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 !!

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

本文标签： javascriptShared module imported in AppModuleStack Overflow