Angular Modules or ngModule
Components, Templates, Directives, Pipes, and Services make up the basic elements of Angular Applications. To build an entire application, we build numerous such building parts. The management of these blocks gets more challenging as the application gets larger. Using Angular modules (often referred to as ngModule), Angular provides a good approach to organise these blocks in a straightforward and efficient manner.
Within Angular, modules come in two different varieties. One is the Angular Module, while the other is the JavaScript Module.
What is Angular Module?
The Angular module, sometimes referred to as ngModule, aids in the organisation of the components of the application into coherent functional units. Each block focuses on offering a particular feature or capability. A specific feature needs to be implemented by the Angular module. That Module will include the Components, Directives, and Services that implement that feature.
The separation of concerns is kept through the modular design. Maintain the features as a unit. makes code maintenance simple. increases the ease of code reuse.
The Angular itself is built on the concept of Modules. The @angular/core is the main Angular module, which implements Angular’s core functionality, low-level services, and utilities.
FormsModule, HttpClientModule, and RouterModule are examples of different feature modules that are used to implement features like forms, http, and routing. Many third-party libraries, like Material Design, Ionic, and others, are constructed around Angular.
Modules are used to assemble Angular Applications. Component, directive, service, pipe, and other items are exported by the module and can be imported into other modules.
We can accomplish this in TypeScript by employing the "import" and "export" keywords. Accordingly, the modules that must be exposed must be declared using the "export" keyword, while the modules that wish to import the exported modules must include the "import" keyword.
There should be at least one module in every angular application. The AppModule (app.module.ts file) is the default module or root module of our angular application.
JavaScript Modules
The JavaScript Language includes the JavaScript Modules, often known as JS Modules, ES Modules, or ECMAScript Modules. A file is used to hold the JS Modules. Both a file and a module have precisely one instance each. These modules include compact, standalone, reusable bits of code. They export a value that can be used by another module after being imported.
How to Create an Angular Module?
Create the Angular Modules by decorating it with the ngModule decorator.
The NgModule() decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are
Declarations array
Components, directives, and pipes that are a part of this NgModule are declared here.
Only those Components, directives, and pipes that are a part of this module should be added in this array. The component can only be a part of one module.
Providers array
Here, you can add the services you desire to the list of services offered throughout the application. After that, dependency injection can be used to inject the services.
Imports array
It informs Angular about other NgModules that are necessary for this specific module to operate successfully.
Once Imported, any components, directives, and pipes that are defined and exported in that module can be used in this module.
Exports array
if we want any components, directives, and pipes declared in this NgModule to be used in the template of any other component that is part of an NgModule that imports this NgModule,
we have to add that components, directives, and pipes in export array.
In short, The component, pipes, and directives of this NgModule must be provided here if you wish other modules to use them. Provided when that other module import this module
Bootstrap array
Which component should be loaded by Angular when the app-level module loads is specified by the bootstrap property or key of the NgModule decorator. Angular loads the AppComponent, an app-level component, by reading the bootstrap metadata.
This is a must if you are the first module ( called the root module) that is loaded when the Angular App starts. It is the responsibility of the root module to load the first view and it is done by specifying the component here.
If the module is not the root module, then you should keep this blank
EntryComponents array
Only components that are built dynamically and are not found in HTML are defined in the entryComponents array.
Angular requires this hint to find entry component and compile them and dynamically load them.
The components are loaded when angular
1. Finds the Component Selector in the HTML
2. Declared in the bootstrap array
3. Declared in the root definition
4. If your component is not listed any of the above, then it needs to be declared in EntryComponent so that Angular knows where to find them and compile them.
Suggested Readings
Bootstrapping in Angular: How It Works Internally
