Angular 10 Tutorial - Module

In this tutorial, we will learn about modules in Angular 10. In Angular, a module is a mechanism to group components, directives, pipes, and services that are related in such a way that can be combined with other modules to create an application.

Creating a Module

Let's see how to create a module. Open the command prompt and type the command:

ng g m auth

The module has been created. Let's take a look at this module. Switch to the project and go inside the src directory, then open the app directory. You will see the auth directory. Inside this auth directory, the auth module has been created. Open the auth.module.ts file, and you will see the ngModule, which is used to define the Angular module, and its properties.

Creating Components inside the Module

Now, let's create some components inside this auth module. Create one component:

ng g c auth/login

Create another component:

ng g c auth/signup

Login and signup components have been created. Switch to the project, open the auth.module.ts file, and you will see both components, login and signup, automatically imported here. Now, inside the ngModule, add one more property, which is exports.

exports:[ 
    LoginComponent, 
    SignupComponent
] 

Add the components:

Just type here LoginComponent and SignupComponent.

Adding Content to the Components

Now, add some text to the login component. Open the login.component.html file and add text here:

<h1>Login Component</h1>

Add text to the Signup Component:

<h1>Signup component</h1> 

Adding the Module to the App Module

Now, add this auth module to the app.module.ts file. Open the app.module.ts file and import the auth module:

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

Add the AuthModule to the imports array. Now, save all and let's check. Switch to the browser, and you will see the login component and signup component, which are coming from the auth module. This is how you can create a module in Angular 10.