Building a Custom Module in Angular
This guide walks through the process of creating a custom Angular Module. If you're unfamiliar with Angular Modules, it's worth checking out this post first.
Angular CLI provides a straightforward way to scaffold a module. The standard command looks like this:
ng generate module <module_name>
or you can use the abbreviated form:
ng g m <module_name>
Open a command prompt in your project's root directory and execute:
ng g m payroll
The output in your terminal will resemble what's shown below:
After this, your project structure should look like this:
Observe that a new directory has been created using the module name, containing a file called payroll.module.ts.
Let's inspect the contents of this newly generated file:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class PayrollModule { }
The structure here parallels what you see in Angular's default app.module.ts. One notable difference is that the declarations array is currently empty. This is expected since we haven't associated any components, pipes, or directives with this module yet. To add them, you'd include their names in that array.
Let's move on to that process. Go back to your terminal and use the CLI to create a component.
First, try this command: ng g c PayrollDashboard
A common question at this point is: which module will this component be added to? In the command above, the component is still registered with the app.module. To assign it to our specific module, we need to add a flag to the CLI call.
The updated command is:
ng g component PayrollDashboard
--module=payroll/payroll.module.ts
The output looks similar to when you create a standard custom component. However, there's a crucial difference: the log indicates an UPDATE was made to payroll.module.ts, and notably, not to app.module.ts.
If you open payroll.module.ts now, you'll find the newly created component listed in the declarations array. You might, however, notice an issue with the file structure. The component was generated outside of the payroll folder (note the yellow arrow in the image):
To keep everything organized and all payroll-related features within the payroll directory, a simple adjustment to the component generation command is needed:
ng g component payroll/PayrollDashboard --module=payroll/payroll.module.ts
We've simply prefixed the component name with the folder name. That's the trick for keeping things tidy.
So, we've successfully added the component. But what's the next step? Can we use it just like any other component, for example, by placing its selector in app.component.html?
The answer is NO. There are two additional, and very important, steps to take.
1️⃣ Since payroll.component resides in the payroll module, you must import this module into the module where you intend to use it. In our scenario, we're using the component within app.component.html, which is part of app.module.ts.
Notice how we've added the payroll module to the imports array. We touched upon this concept in the earlier discussion.
2️⃣ Merely importing the module isn't sufficient. The component you're using outside its defining module must be listed in the exports array of that module. In our case, we need to add the component's name to the exports array within payroll.module.
That covers the essentials. Refreshing your browser should now display the final result:
Stay tuned for our next post where we'll explore the different types of modules available in Angular. If you found this helpful, please show your support. I share more insights on Angular, JavaScript, TypeScript, and CSS on Twitter – hope to see you there.
Cheers!!!
Happy Coding