Building an Angular Application from OpenAPI Specification

Page Contents

If you create REST APIs using LoopBack and need to build a front-end application that consumes the APIs, the OpenAPI specification can be used to generate the models and web client in an Angular application using ng-openapi-gen Node.js module.

Here are the steps:

Prerequisite

Install the ng-openapi-gen module and Angular CLI by running the following commands:

npm install -g ng-openapi-gen
npm install -g @angular/cli

You can check out Angular documentation for more details.

Step 1: Generate the OpenAPI specification from the LoopBack application

The OpenAPI spec from a LoopBack application can be obtained by starting the application and then go to http://localhost:3000/openapi.json. It can also be obtained by running the following command without starting the server:

npm run openapi-spec

Save the OpenAPI spec in a file which will be used later.

Step 2: Generate an Angular application

Run the following command to run:

ng new <application-name>

Step 3: Generate models and web client in the Angular application

Use the ng-openapi-gen command to generate the models and web client for the Angular application based on the OpenAPI spec generated from the LoopBack application.

ng-openapi-gen --input <path-to-openapi-json> --output <angular-app-path>/src/app/api

You will see src/app/api folder is created, where the models are under the /models folder and web client under the /services folder.

Step 4: Update the `_rootUrl` in `base-service.ts`

Next, modify the URL of where the REST APIs can be invoked. In the Angular application, go to src/app/api/base-service.ts and modify the _rootUrl variable value to where the REST APIs can be reached. This is the base URL of the REST APIs, for example, http://localhost:3000.

Step 5: Create a Component that calls the REST endpoints

A Component can be created using ng generate component <component-name> command, and then a set of files in src/app/<component-name> will be created. Two files need to be modified:

*/<component-name>.component.ts: calls the REST APIs to retrieve data
*/<component-name>.component.html: displays the data

Taking an example of the todo application,

Updates src/app/todolist/todolist.component.ts to get the data through the controller service within the Angular application.

// Add these imports
import {Todo} from '../api/models/todo';
import {TodoControllerService} from '../api/services/todo-controller.service';
// ..
export class TodolistComponent implements OnInit {
  // add `todos` variable which holds the todo list
  todos: Todo[];
  // add a todoService parameter of type TodoControllerService to the constructor
  constructor(private todoService: TodoControllerService) {}
  // update this method to get the todo list on init
  ngOnInit(): void {
    this.getTodos();
  }
  // add a new function getTodos to get the todo list from the service
  getTodos(): void {
    this.todoService.findTodos().subscribe(todos => (this.todos = todos));
  }
}

Update src/app/todolist/todolist.component.html to display the data from the REST calls.

<ul class="todos">
  <li *ngFor="let todo of todos">
    <span class="badge"></span> - 
  </li>
</ul>

Step 6: Update app.component to import the required libraries

Update app.module.ts to import the required libraries. Since Http client is required to call the REST APIs, HttpClientModule is needed. Depending on the UI components to be added in the application, you also need to import those libraries as well.

add the import

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

update the @NgModule decorator to include the HttpClientModule:

@NgModule({
  declarations: [
    AppComponent,
    TodolistComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // <----- add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})