3.2 - Angular: Health-check module

Step 1 - Open in Visual Studio Code IDE

I will be using Visual Studio Code as my IDE. Open Visual Studio IDE, select the project folder, click on open. 

Step 2 - Generate health-check module with routing, service, component using angular cli generate command.

You can user internal IDE terminal to execute below commands. By default internal terminal points to project root directory. We will create health-check and all related files under it's own module . 

• Add health-check module with routing

<project root>$ ng g m health-check --routing=true

• Add health-check component

<project root>$ ng g c health-check

• Add health-check service (please note, we need to specify directory name here)

<project root>$ ng g s health-check/health-check

you can see all related files got added under health-check directory.

Step 3 - Reference health-check  component and service inside health-check module.

Give reference of health-check routing, component inside health-check module in case it is not updated automatically. There is no need to give reference for health-check service as providedIn: 'root' inside service removes the need to import the library.

src/app/health-check/health-check.module.ts

@NgModule({
  declarations: [HealthCheckComponent],
  imports: [CommonModule, HealthCheckRoutingModule]
})

export class HealthCheckModule {}

Step 4 - Add httpClient module inside health-check module.

As per docs httpClient is a mechanism to communicate to remote server over http. So adding httpClient module inside health-check module.

src/app/health-check/health-check.module.ts

import { HttpClientModule } from '@angular/common/http';
...

@NgModule({
  ...
  imports: [
    ..
    HttpClientModule
  ]
})

Step 5 - Add a method inside health-check service to retrieve data from backend API

Inject httpClient into service constructor and create a method getServerHealthCheck(); which uses httpClient get method to connect to remote API and returns the observable. Here we are assuming our backend API is running on localhost:3000/api. We will create backend api soon. 

src/app/health-check/health-check.service.ts

export class HealthCheckService {
  constructor(private httpClient: HttpClient) {}

  getServerHealthCheck(): Observable<any> {
    return this.httpClient.get<any>('http://localhost:3000/api/healthcheck');
  }
}

Step 6 - Update health-check component & corresponding template to call above service method

Inside component create a method which calls above service method and also subscribes to get the response from backend server. We expect the response object as a JSON with message as key. Store the response message inside result variable. This method is called during component initialization. Finally result is displayed on health-check template.

src/app/health-check/health-check.component.ts

export class HealthCheckComponent implements OnInit {
  result: string;

  constructor(private healthCheckService: HealthCheckService) {}

  ngOnInit() {
    this.getServerHealthCheck();
  }

  getServerHealthCheck() {
    this.healthCheckService
      .getServerHealthCheck()
      .subscribe(
        (response: any) => {
          this.result = response.message;
        },
        () => {}
      );
  }
}

src/app/health-check/health-check.component.html

Healthcheck Server Result: <b>{{result}}</b>

Step 7 - Add health-check route

Add /healthcheck route inside health-check routing module and health-check component as a corresponding component.

src/app/health-check/health-check-routing.module.ts

const routes: Routes = [{ path: 'healthcheck', component: HealthCheckComponent }];

Step 8 - Reference health-check module inside app module

Finally add reference of health-check module inside main app module.

src/app/app.module.ts

@NgModule({
  ...
  imports: [
    ...
    HealthCheckModule
  ]
  ...
})

Step 8 - Summary

• When user hits the url http://localhost:4200/health-check,  It will activate corresponding component mentioned for health-check route that is health-check component.
• We have specified 'Init' hook so ngOnInit() method will get executed after constructor(), which calls our getServerHealthCheck() method. 
• Component's getServerHealthCheck() method calls a service method.
• Service method makes http 'Get' call to retrieve response from backend API server and returns observable. 
• Component's getServerHealthCheck() has subscribed to it. It assigns the response message to result.
• Corresponding template displays the result.

Step 9 - End-to-end final testing  

Covered in last article of this chapter.

FootNote:

• • This article is part of corse Build MEAN Stack Bootstrap Project From Scratch
  • Angular code is available on  github css-ngapp-v1  (Refer tag v1.1-health-check-module for this article) 
  • Nodejs code is available on github css-nodeserver-v1