In the last episode of this series, I went through the basic installation of the Angular 10 framework and how we can configure it with Bootstrap 3. In this post, I want to cast some light on the Angular Modules. What are they and how we can use them. I know that the latest version of Angular is 13 which was launched on November 3, 2021, but the concepts that I try to detail here and in the future are core behaviors and they are still relevant in 2022.

What are the Modules?

To be able to work in an easier way, Angular makes it possible to categorize files into bundles. One bundle can contain a bunch of files and when we are talking about Modules we are talking about the bundles.

In other words:

A module basically a bunch of files in Angular to create a bundle for the Framework. A module is a bundle of functionality for our Application.

It is important to note when we execute the ng new [app] command Angular generates an app.module.ts file by default.

What can we find in a Module?

If we open the app.module.ts we can find several auto-generated lines in that file. The main code is inside a Module decorator.

# Everything that starts with an @ symbol in Angular is a decorator.
@NgModule({});

Module decorator comes with four properties by default.

1. declarations
2. imports
3. providers
4. bootstraps

Declarations

We can register new components in this declaration array! Although Angular will know about the new component. We need to provide a path to this component to TypeScript too! This is the reason why the import command is for!!

If no import is set, then TypeScript will fail!

By the way, it is important to mention that the TypeScript import and the imports of the NgModule decorator are not the same. The error above is coming from a missing import on the top of the file.

# This is for the TypeScript! The lack of a similar import
# caused the error message in the screenshot above!
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
# This is for the Module Decorator
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Imports

It allows us to add other modules to our code so developers can follow the separation of concerns (SOC) in their applications.

Providers

We can define services here.

Bootstraps

It tells, which component should Angular be aware of at the point of time when the application starts. In other words: Which component should be recognized in the index.html file.

Conclusion

Modules are one of the basic building blocks of Angular. We can bundle files into modules and we can import and bootstrap different functionalities into the Framework.