Understanding Angular Modules: A Complete Guide (Angular 13)

Hello everyone, welcome back to blog! This is our Angular 13 Tutorial , and in this post, we’re diving into Angular Modules. If you’re looking to get a better grasp of how modules work in Angular, you’re in the right place. Let’s get started!

What is an Angular Module?

In Angular, a module is essentially a container where we group different components, directives, pipes, and services for a specific functionality within an application. This helps in keeping the code organized and modular.

To make it simple, consider user authentication as an example of a module. This module might consist of various functionalities like login, register, reset password, and forget password. Each of these functionalities can have its own component, but they are all grouped under the User Authentication Module.

The main idea is that we break down a large feature into smaller functionalities by creating components for each, and then group them together as a module. This approach allows better code management, reusability, and scalability.

Default App Module

When you create an Angular application, it comes with a default module known as the App Module. This is the root module of the application, and all other modules are linked back to it.

Every Angular module is created using the @NgModule decorator, and it requires important metadata like:

• Imports: This includes other modules like BrowserModule or any custom modules you create.
• Declarations: This section contains the components associated with the module.
• Exports: This makes certain components or modules available outside of the current module.

Importing Modules

When creating a new module, you must import it into the App Module. For example, if you’re creating a routing module, you’ll need to import it into the App Module to handle navigation.

If you’re manually adding any component or feature, make sure it’s imported properly in the corresponding module, whether it’s the App Module or a custom one.

Adding Components to a Module

Similarly, when you create a component for a module, it should be added in the declarations section of that module. This is essential for Angular to recognize and use the component within the module.

For instance, if you want to use Reactive Forms or Template-driven Forms, you’ll need to import the FormsModule or ReactiveFormsModule within your module to ensure forms can be utilized across the application.

How to Create a New Module

Let’s walk through the process of creating a new module step by step.

1. Create a Module:
   Angular CLI provides a command for generating a module. Run the following command to create a new module:

   ng generate module auth

This command will create an auth module for handling user authentication features.

2. Create Components for the Module:
   Once the module is created, you can start adding components to it. For example, to create a Register component inside the auth module, run:

   ng generate component auth/register

Similarly, you can create a Login component for the authentication module:

   ng generate component auth/login

Make sure that the components are grouped within the module, keeping them isolated and modular.

Accessing Components Across Modules

Let’s say you want to access the Login component from the auth module in the App Module. By default, it won’t be accessible unless you explicitly import the auth module into the App Module.

Here’s how you do it:

1. Import the Auth Module into the App Module:

   import { AuthModule } from './auth/auth.module';

2. Register the Auth Module inside the App Module’s imports array:

   @NgModule({
     imports: [
       BrowserModule,
       AuthModule
     ],
   })

3. Export Components: To make the components of the auth module accessible in other modules, you may need to export them. For example, if you want the Login component to be available elsewhere, add it to the exports array in the auth module.

   @NgModule({
     declarations: [LoginComponent, RegisterComponent],
     exports: [LoginComponent]
   })

Once this is done, you can use the LoginComponent in your AppComponent or any other module. Here’s an example of using the app-login selector inside the AppComponent:

<app-login></app-login>

Final Output

Now that everything is set up, when you run the application, you should see the login component working as expected in your main application.

Summary

Modules are essential in Angular for organizing and managing your application’s features. You can create new modules, add components, and import/export them as necessary. By dividing your application into small, reusable modules, you can make your code more scalable and easier to maintain.