Angular modules and components
Let’s try to demonstrate this through a practical application. We will set up our application in such a way that we can use the Angular module structure which should make things clearer. First, we will generate the core module, the core component, and then a shared module using the following commands:ng generate module coreng generate component core.
If we set up the module first, a folder will be created with our core module. Then, when the component is generated, it will be placed inside the same folder and will be declared in the module by our CLI.Declaring components in an angular module
Create Angular Module cli
An Angular Module groups a set of Angular artifacts, such as components, directives, pipes and services that are part of that same module. That said, it represents a logical grouping in what we could call functional area of our application (e.g. contact module, administration module,…). Moreover, an Angular Module also defines the dependencies with other modules, that is, which other modules it needs to import and in turn which components, directives or pipes it exports.
In this example, we see imports as FormsModule whose exports we can now use in our ContactModule. Moreover, the module declares in the property declarations which components it uses and in the property providers the services it uses. As you can see from the exports property, we only export certain components that will then be available to other consumers of our ContactModule.
Furthermore, the reuse of components, services,… is done at module level. We do not directly import an individual component from another module as, for example, people.component in the following example.
Create module in Angular
A module is one of the main elements with which we can organize the code of the applications in Angular. They should not be unknown until this point of the Angular Manual, since our basic application already had one.
However, instead of placing the code of all components, directives or pipes in the same main module, the appropriate thing to do is to develop different modules and group different elements in one or the other. The order will be done in a logical way, according to our own preferences, the business model or the preferences of the development team.
To facilitate the tasks of module creation we will rely on the Angular CLI. The command to generate this new module is “generate” and then we have to indicate what we want to generate, in this case “module”, ending with the name of the module to create.
Once this command is launched in our project, inside the “src/app” folder a subdirectory with the same name of the generated module is created. Inside we will also find the file with the module code.
Multiple Angular modules
If Angular stands out for something, it is for its great organization. Everything is correctly separated by files or directories according to its function of what it does in our application. When an Angular project grows in size it will be necessary to create a lot of components, directives, forms, classes, interfaces, etc.
To be able to continue maintaining this order in our projects, Angular provides us with modules that are able to group/contain components, directives, forms, classes, interfaces, etc. inside them.
When we create a project, by default, we will have at least 1 module the AppModule (Root) that will be our CoreModule (central module). Although if you answer Yes to ¿Would you like to add Angular routing? (Would you like to add Angular routing?) we will create two and not only one module when creating the basic structure of a project.
Therefore, if we have 1 or 2 will depend on whether we create routing in our module. If we give it to no we only have the default one that would be app.module.ts. In the case that we have answered Yes to the routing question we can check that we already have two modules.