Adding Our Client Components to the ClientModule
Let's structure our application into different functional areas by tidying up our components and new modules.
Update client.module.ts
file
We’ve created the ClientModule
. We can now add all our Client
components to this module to start structuring our application into the different areas of functionality. When we do this refactoring, we will encounter a couple of issues, but first, let’s make the changes. Then we can go through the problems we encountered and why they happened.
This is our new client.module.ts
file as follows:
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ClientPageComponent } from "./client-page/client-page.component";
import { ClientFormComponent } from "./client-form/client-form.component";
import { ReactiveFormsModule } from "@angular/forms";
@NgModule({
declarations: [ClientPageComponent, ClientFormComponent],
imports: [CommonModule, ReactiveFormsModule],
})
export class ClientModule {}
Add components
As you can see, we’ve made a couple of changes. First, we’ve added the ClientPageComponent
and the ClientFormComponent
to the declarations
array of the module. As we know, the declarations
array is how we tell the ClientModule
what components belong to it. So, when the ClientModule
is imported into another module, say the AppModule
, the AppModule
knows what component, directive, or pipes belong to the ClientModule
.
📝 Note: We will remove
ClientPageComponent
and ...
Get hands-on with 1400+ tech skills courses.