Connect Spring Boot and Angular type-safely with OpenAPI Generator

This article is an upgraded version of the following previous articles. Connect Spring Boot and Angular2 to type-safe

It was an issue

I was afraid that the web backend and the web frontend were communicating loosely with JSON. I wanted to detect problems as much as possible during build. I wanted to be able to communicate type-safely like RPC.

Various version upgrades from the previous configuration

OpenAPI Generator and Swagger Codegen are tools that generate client code and server stub code based on the REST API specification. Unfortunately the operation of Swagger Codegen? There seemed to be a problem with OpenAPI Generator, which was forked by top contributors. Currently, OpenAPI Generator has more commits and contributors. This time, I switched to OpenAPI Generator.

What I made

This is a template project. https://github.com/chibat/spring-openapi-angular-starter

Project structure

The OpenAPI Spec file is automatically generated by SpringFox and does not need to be created manually.

Development flow

Let's take a simple addition application included in the template project as an example.

1. Creating a web backend

Web backends are created in Spring Boot. It is a Controller class that just receives two integers in a request, adds them, and responds.

package app.backend.web;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import io.swagger.annotations.ApiOperation;
import lombok.Data;
import lombok.Value;

@RestController
public class CalculatorController {

    @PostMapping("/rest/api/add")
    @ApiOperation(value = "", tags = "calculator", nickname = "add")
    public Response add(@RequestBody final Request request) {
        return new Response(request.getArg1() + request.getArg2());
    }

    @Data
    public static class Request {
        private Integer arg1;
        private Integer arg2;
    }

    @Value
    public static class Response {
        private final Integer result;
    }
}

It should be noted that the ApiOperation annotation uses the client class name that generates the string specified by tags and the string specified by nickname as the method name. Also, nickname is treated as an OperationId of OpenAPI Spec, and it seems to be useless unless it is unique as a whole.

2. Web front end client code generation

Perform Gradle tasks and generate client code.

$ cd backend
$ ./gradlew openApiGenerate

The test is executed and the API specifications output by SpringFox are output to a file. OpenAPI Generator reads the file and generates the client code.

Dependence on SpringFox is only for testing and does not increase the size of the application at runtime.

3. Creating a web front end

Web frontends are created in Angular. Create a Component class that uses the generated client code. CalculatorService is an automatically generated class.

import { Component } from '@angular/core';
import { CalculatorService } from './client/api/calculator.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  arg1: number;
  arg2: number;
  result: number;

  constructor(private  calculatorService: CalculatorService) {
  }

  add() {
    if (this.arg1 || this.arg2) {
      this.calculatorService
        .add({arg1: this.arg1, arg2: this.arg2})
        .subscribe(data => this.result = data.result);
    }
  }
}

Summary

OpenAPI Generator Good. The generated Angular code is also good. As mentioned above, please enjoy a comfortable type safe life.

The OpenAPI Generator e-book is now on sale! (Added on 2019-09-19)

The OpenAPI Generator e-book is now on sale. If you are interested, why not purchase it?

Introduction to Code Generation for REST API (OpenAPI Generator)