Which OpenAPI client sdk for loopback4 and angular?

Question

We are currently migrating a loopback3 application to loopback4. The migration of the server is steight forward, but migrating the angular client seems become an issue because of the "sdk".

For loopback3 we used @mean-expert/loopback-sdk-builder to generate a client sdk for angular6+. This project seems reaced end-of-life and is not compatible with loopback4.

Generating the sdk for loopback3 worked for us that way:

package.json of server:

"scripts": {
    "gen-sdk": "node ./node_modules/@mean-expert/loopback-sdk-builder/bin/lb-sdk src/server.js ../frontend/src/app/shared/sdk --wipe=enabled"
}

The generator starts a copy of the server, reads different internal metadata and writes the generated files to the client project - as far i can see it does not make use of the swagger.json provided by loopback3.

We are searching for an alternative sdk to use with loopback4. The backend provides a openapi.json to describe the endpoints.

Which sdk do you use in your angular projects (ideally written in TypeScript)? Is there a sdk which generated code is mostly compatible with @mean-expert/loopback-sdk-builder?

So far I found and tested the following projects to generate a openapi client:

• openapi-generator
  • con: is written in Java
  • con: throws NullpointerExceptions all the time (maybe our openapi.json is not correct, but this generator does not provide useful error messages)
• ng-openapi-gen
  • pro: is written in TypeScript
  • con: the generated operation names are really strage, maybe only in combination with loopback4?
  • con: the project does not seem to be very active

Which angular setup do you suggest to talk to an loopback4 rest backend?

Misogynist

Answer 1

The Loopback 4 project addresses this issue with their documentation on Building an Angular Application from OpenAPI Specification

A summary of the steps are:

1. In your Loopback 4 project generate the openapi-spec from your controllers with the command npm run openapi-spec to generate an OpenAPI JSON file.
2. In your Angular application use the ng-openapi-gen package to generate Angular API stubs from the OpenAPI JSON file in the previous step. For example:

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

The contents of the <angular-app-path>/src/app/api directory contain models for the API to use within Angular. See their documentation for a complete example.

Cresida