How to correctly import the Angular Material module through a shared module in Angular 4?

Question

I\'m building an application using Angular paired with Angular Material, and I\'m having some issues with my modules structure.

As the guidelines suggest, importing

Answer 1

Your first mistake is services in SharedModule. SharedModule should not have Providers array. CoreModule is used for services.

You don't need to import all stuff in shared module. SharedModule is for exports usually. Also MaterialModule does not need imports because it does not use them. Its purpose is export.

If NavBarComponent is used app wide so it should be in CoreModule. Not in SharedModule.

If you do not have to, don't import SharedModule into AppModule. SharedModule is for FeaturedModules.

Read Offical Docs: https://angular.io/guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them