Adding Our Client Components to the ClientModule

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 the ClientFormComponent from the declarations array of the app.module.ts file.

Import modules

Next, we have ...