I have questions about how to use the NgModule decorators. What are they and what are they for?
How to create a separate module to load one or more libraries and components?
For example, one to load the dependencies and elements of Material Design, another to load and start AngularFire and another to load certain components of the application
Modules are the main form of organization and architecture that angular provides. So anything related to architecture depends primarily on each project . But according to the official documentation and there are some general guidelines recommended as a architecture by features .
First we will see the existing fields in the modules:
Required:
imports - > Where you import other modules that your module depends on.
declarations - > Declarations of the components that are inside your module.
Optional
exports - > Declarations of the components will be visible to other modules that import this module.
providers - > Declarations of the services from the angle 6 you can declare the service to have a global scope within it making this option useless for newer applications.
You always have the app.module that is the main module that loads other modules and their main routes. Everything you upload here will have a global scope in your app but will slow down when you start.
The point of having multiple modules and just being able to have an extremely efficient application where each module only uses what it really needs. For example not every module needs forms for example. This way and with the help of lazy loading can make your application very light.
So let's look at an example:
If you have a product feature that has for example a route / products that allows you to list and insert products it makes sense to have a products module where you load these components (product list, insert product) and this module will only load when your user logs in / products which is very useful for large applications.
Another interesting point is shared modules or shared modules that normally contain only visualization components (only contains inputs and outputs and no business logic). In this shared modules you can have for example a have cards module that in our example would have a product card and where this module is imported you will have access to that component. I recommend having several of these shared modules so you can have a buttons.module, cards.module or anything generic you can imagine. Helping to share the code and giving consistency the view of your project.
