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
//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
@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.
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.
Table of Content
- What is Module in Angular?
- Steps to Create a new Module in Angular
- Creating Module Using the Angular CLI
- Manually Creating new module
Contact Us