How to use Ngmodule modules and decorator?

Question

I have doubts about how to use the decorators of NgModule. What they are and what they’re 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, one to load and start Angularfire, and one to load certain components of the application

Answer 1

Modules are the main form of organization and architecture that angular provides. So like anything related to architecture depends mainly of each project. But according to the Official documentation and there are some general guidelines recommended as an architecture by Features.

First let’s see the existing fields in the modules:

Mandatory:

Imports - > Where you import other modules that your module depends on.

declarations -> Declarations of the components within your module.

Opitional

Exports -> Component declarations will be visible to other modules that import this module.

providers -> Service statements from angle 6 vc can declare the service to have a global scope within it leaving this option useless for newer applications.

You always have the app module. that the main module that loads other modules and their main routes. Everything that is loaded here will have a scope global in its application but slower to start.

The point of having several modules and precisely being able to have an application extremely efficient where each module only uses what it really needs. For example, not every module needs Forms. That way and with the help of Lazy loading the angle can make its application very light.

So let’s take an example:

If you have a Feature products that has for example a route /products that allows you to list and insert products it makes sense to have a module products where you load these components(list-product, insert-product) and this module will only be loading when your user enters in /products which is useful for large applications.

Another interesting point are Shared modules or shared modules which normally contain unique components of visualization (contains only inputs and outputs and no business logic). In this Shared modules you can have for example a cards module you can in our example would have a product card and where this module is imported you will have access to this 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 the consistency the visualization of your project.