How to Import Angular Material — Angular Best Practices.

Disclaimer

This story is for people who are struggling on how/where to import every single material component module into their app. It will cover essentially people that are using the SharedModule pattern.

Back to The Basics

So, let’s consider you have setup your SharedModule and importing it in every feature module. The only material modules that you should be importing and exporting in this module are the ones that are widely used in your app.

Some examples of components that are essentials for the app are ( Buttons, Icons, Cards, Inputs). It will mainly depend on the app you’re building, but this are examples for common usage apps.

Performance Impact

A very common mistake is to put every single angular material module in the shared module, that works but you will certainly end up with huge bundles sizes.

Everyone knows that feeling when you’re in low internet speed mode and you really want to download that last 100Kb 😆. Avoiding that mistake and you’re improving the user experience and life !!!

Conclusion

Try to be kind with the SharedModule and only put the essential components that are very important for the app inside of it. Don’t hesitate to import your fancy material modules in the feature modules. Also, click here if you want to know more about the CoreModule and SharedModule.

Thanks for reading, and don’t hesitate to put your questions / feedbacks in the comments section to tell me what you missed / liked.