How to Create a new module in Angular ?

Modules are most important when it comes to building strong and scalable Angular applications. They help organize your code, promote modularity, and improve maintainability. It encourages collaboration among developers by grouping related components, directives, pipes, and services.

In this article, we will see how to create a new module in Angular.

What is Module in Angular?

Module in Angular refers to a place where you can group the Components, directives, pipes, and services that are related to the application. The simplest way to create a module is using Angular CLI. NgModules are Angular libraries such as FormsModule, HttpClientModule, and RouterModule. NgModules can also be used to access third-party libraries such as AngularFire2, Ionic, and Material Design.

Steps to Create a new Module in Angular:

There are mainly two methods for creating a module:

• Using the Angular CLI
• Manually Creating Module

Creating Module Using the Angular CLI:

In most cases this Approach is highly recommended ,as it is easy, quick and Efficient. Angular provides you command to generate new Modules,

Step 1: Open your terminal or Command prompt and go to the root directory of your Project.

Step 2: Run the Following Command ,in place of ‘[name]’ write your desired module name,

ng generate module [name]

you can also make this command short by using

ng g m [name]  

create module

Manually Creating new module

Step 1. Go to app Directory, right click on it select New folder and give it a name.

Step 2: In that folder right click and select new file and name it as “job.module.ts” or anything else of your choice.

Step 3: Now we have to Import ng module from ‘@angular/core’ and add some lines of code in

Node

//job.module.ts

import { NgModule } from '@angular/core";

@NgModule({

    declarations: [],

    imports: [],

    providers: [],

    bootstrap: [],
})

export class JobModule {
}

And Remember to add your components, services , and elements to the arrays as in the above code.

Example- write ‘ng g c job/job –flat’ to create a component using flat if you do not want to create separate folder for your components.

Now you can declare your job components in array ,you can also add other components and import other modules.

Step 4: Now as we have declare module, we can import Job Module in other module and use it component of that module.

Example- I want to use job module in app module then

1. just open the module, in import part write ‘JobModule’ to import it and before that export job component

Node

@NgModule({
    declarations: [JobComponent],
    imports: [],
    providers: [],
    bootstrap: [],
    exports: [JobComponent],|
 })

export class JobModule {
}

2. Once that is done, you will be able to see suggestion in app component.

3. Now if you will reload job component content is visible.