Hystrix Circuit Breaker – Step by Step Configuration With Feign Client – Part 3 (Angular UI App)

This if Part 3 of or Hystrix Circuit Breaker microservices architecture. It follows from Part 1 and Part 2.

In this part, we’ll build a simple UI application with Angular.

There’s a standalone step by step tutorial on Building a simple UI with Angular here. But it has nothing to do with Hystrix.

1. Setup Node.js and Angular
2. Create and Start the Angular UI App
3. Create the Product Component
4. Create the HTTP Client Service
5. Use the Http Service in the Product Component
6. Modify the HTML Page to Display List of Products
7. Add Bootstrap and JQuery
8. Do Some Testing!

1. Setup Node.js and Angular

Since Angular works with Node.js, you need to download and install Node.js. Get Node.js from here and simply run the installer

After the installation open the command and confirm the installation using the command below

node --version

To install Angular, run the command below

npm install -g @angular/cli

After the installation is complete, check using the command below:

ng --version

2. Create and Start the Angular UI App

It’s very easy to create an Angular app. Let’s first do this in command prompt.

So open the command prompt and navigate to the location where you want the Angular UI app to be. Then execute the command below to create a new Angular app. The name of the app is ProductUI

ng new ProductUI

After the the command executes successfully, navigate into the application folder using the command

cd ProductUI

Then you can then run the below to start the app:

ng serve

After the server start, then visit http://localhost:4200 and you will see the start page.

3. Create the Product Component

At this point, I would recommend you open the project in either Visual Studio Code or IntelliJ. Also take some time to examine the project structure and the files that have been generated.

The product component is simply a component responsible for displaying the list of products in a HTML page.

Using the embedded command prompt, run the following command to generate the Product Component.

ng generate component product

After this command executes, you’ll notice that a new folder have been created called product. Inside it you’ll see four files.

• product.component.css: contains the styles for the component
• product.component.html: the actual html page that is rendered
• product.component.spec.ts: codes for unit tests
• product.component.ts: the TypeScript file

Do the following:

Step 1: Delete the content of the html file leaving only the <router-outlet> tag

Step 2: Open the routing.module.ts file and add a route to render the the product component. Add this to the routes state

{path: 'products', component: ProductComponent}

Be sure tot add the neccesary imports too.

4. Create the HTTP Client Service

This is a service that would be used to make HTTP calls to the ProductWeb api we created in Part 1.

Run the command below:

ng generate service service/httpClient

After the command runs, open the httpclient.service.ts file.

Define the product class before the @Injectable

export class Product {
  constructor(
    public  productId: string,
    public  name: string,
    public  code: string,
    public  title: string,
    public  description: string,
    public  location: string,
    public  price: string,
  ) {
  }
}

Then add the httpClient as a parameter to the constructor like so:

private httpClient: HttpClient

Finally define a method that does the actual http call to the ProductWeb. This is it:

  getProducts(){
      return this.httpClient.get<Product[]>('http://localhost:8081/products');
  }

Important: Add the HttpClientModule to the app.module.ts file in the imports section

5. Use the HttpClient Service in the Product Component

Now the product component is going to use the service to make http calls. So open the product.component.ts file and modify as shown below. I have added some comments to explain it

import { Component, OnInit } from '@angular/core';
import {HttpClientService, Product} from '../service/http-client.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  products: Product[];

  // Constructor Injection
  constructor(
    private httpClientService: HttpClientService
  ) {
  }

  ngOnInit(): void {
    this.httpClientService.getProducts().subscribe(
      response => this.handleSuccessfulResponse(response),
    );
  }

  // Callback for successful response
  handleSuccessfulResponse(response) {
      this.products = response;
  }

  // Reload the list when refresh button is clicked
  refreshPage($event: MouseEvent){
    this.httpClientService.getProducts().subscribe(
      response => this.handleSuccessfulResponse(response),
    );
  }

}

6. Modify the HTML Page to Display List of Products

Open the product.component.htm. Modfiy it to have the content below:

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand">Demo Amazon</a>
</nav>
<br>
<div class="container">
  <div class="container">
    <!-- Default panel contents -->
    <div class="row">
      <div class="form-actions floatRight">
        <button type="button" (click)="refreshPage($event)" 
                class="btn btn-warning btn-sm" >Check Out</button>
      </div>
    </div>
    <div class="panel-heading"><span class="lead">List of Products</span>
    </div>
    <div class="tablecontainer">
      <table class="table table-hover">
        <thead>
        <tr>
          <th>Product Id</th>
          <th>Name</th>
          <th>Code</th>
          <th>Title</th>
          <th>Description</th>
          <th>Location</th>
          <th>Price</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let product of products">
          <td><span>{{product.productId}}</span></td>
          <td><span>{{product.name}}</span></td>
          <td><span>{{product.code}}</span></td>
          <td><span>{{product.title}}</span></td>
          <td><span>{{product.description}}</span></td>
          <td><span>{{product.location}}</span></td>
          <td><span>{{product.price}}</span></td>
          <td><button type="button"  
                      class="btn btn-info btn-sm" >Order Now!</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

7. Add BootStrap and JQuery

If you look at the html file, you will see that we have used Bootstrap and JQeury codes. We now need to add the Bootstrap and JQuery Libraries.

There are two steps to achieve this:
Step 1: Open the terminal and run the commands below, one after the other

npm install bootstrap -save
npm install jquery -save
npm install popper -save

Step 2: Open the styles.css and add the following

@import "~bootstrap/dist/css/bootstrap.css";

You could also add the import for JQuery and Popper as well.

8. Do Some Testing!

Run the Angular UI on port 8091 using the command

ng serve --port 8091

Also start other three apps

Then visit http://localhost:8091/products.

If you see a beautiful page with list of products, then congrats!

CrossOrigin Error – If you encounter this error, you can resolve it by adding the @CrossOrigin annotation to the RestController file in the API. This is because, by default, the RestController does not allow cross origin access to the methods.