Implementing TypeScript/Angular client generation using Swagger/OpenAPI in the build pipeline

Generating Java/Spring Server-Stubs with swagger-codegen-maven-plugin

In my Spring Boot Java project, I utilize the swagger-codegen-maven-plugin to automatically generate the server stubs for Spring MVC controller interfaces from my Swagger 2.0 api.yml file. The integration into the Maven build process is straightforward and resembles how I used to work with the jaxws-maven-plugin for WSDLs. Below is an example configuration snippet from my pom.xml file using swagger-codegen to produce the server-side models and MVC interfaces:

<plugin>
    <groupId>io.swagger</groupId>
    <artifactId>swagger-codegen-maven-plugin</artifactId>
    <version>2.2.3</version>
    <executions>
        <execution>
            <goals>
                <goal>generate</goal>
            </goals>
            <configuration>
                <inputSpec>/api/api-v2.yml</inputSpec>
                <language>spring</language>
                <apiPackage>io.fischermatte.test.api</apiPackage>
                <modelPackage>io.fischermatte.test.api.model</modelPackage>
                <output>${project.build.directory}/generated</output>
                <configOptions>
                    <interfaceOnly>true</interfaceOnly>
                    <sourceFolder>/src/main/java</sourceFolder>
                    <library>spring-mvc</library>
                    <dateLibrary>java8</dateLibrary>
                </configOptions>
            </configuration>
        </execution>
    </executions>
</plugin>

Integrating Client Code Generation in a npm Build Process

Now, I am exploring ways to incorporate the generation of client code within the npm build process of my Angular app. I have an api.yml file that outlines my REST endpoints following the Swagger 2.0 specification. My goal is to have the npm build create the API module similar to the typescript-angular-v4.3 sample. From what I've observed, there isn't an official npm package that mirrors the functionality of swagger-codegen-maven-plugin when working with Maven.

Am I missing something here? The mentioned sample appears to achieve the desired outcome, but what is the recommended approach to reach that point? Is integrating this process into an npm-based project not advisable? Should one resort to manual generation and inclusion of the generated TypeScript files into the source directory?

Answer №1

In Brief:
Utilize the maven plugin "swagger-codegen-maven-plugin" to automatically generate server/client code from Swagger yaml/json files. Also, incorporate the "exec-maven-plugin" for installing node dependencies via npm and compiling the client using ng build.

Further Details:
Upon encountering a similar query with no satisfactory answers online, I devised the following approach (subjective opinions unwelcome).

Workflow overview:

  1. "swagger-codegen-maven-plugin" is employed to create model and API code for Spring MVC server
  2. Maven takes care of building and installing the generated server code, saving it as an artifact in the local repository
  3. The Spring Boot application integrates the generated server artifact as a dependency, along with necessary configuration, properties, and operational controller implementations
  4. "swagger-codegen-maven-plugin" generates model and API code specifically for the Angular Client, saving the output within the 'mem-client' directory of the Angular project
  5. The "exec-maven-plugin" handles installations of client dependencies (npm install) and builds the application (ng build --env=prod …), storing the output within the resources of the Spring Boot application
  6. Once the Angular client is compiled and included in static server resources, a standalone JAR containing both the spring server and client can be created using the "spring-boot-maven-plugin"

Kindly note that the generated codes are only readable and are included as dependencies/imports. The actual implementation of controllers resides in a separate project. To initiate server/client coding, execute "mvn generate-sources". For creating a complete server+client web application, simply run "mvn install" in the parent "mem" project, resulting in a jar with all essential components enclosed.

For Instance:
An illustrative example is presented here (detailing the creation of a basic "Memory Quiz" game on GitHub's "quiz" branch): https://github.com/makimenko/mem/tree/quiz

Project Overview:

  1. A parent maven pom project titled "mem" housing all child modules
  2. A designated Maven "mem-design" project containing a Swagger 2.0 yaml file amongst its resources
  3. The Maven "mem-server" project encapsulates Spring Boot configurations, properties, and concrete controllers
  4. An Angular 5 client project labelled "mem-client"
  5. Auto-generated code utilized solely in read-only mode as imports, consciously excluded from version control

I trust this information proves beneficial to your endeavors.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble locating my package after successfully installing it with npx

For the purpose of practice, I am developing a package in npm. Upon successful publication, running npm i <myPackage> effectively installs it within the node_modules directory. I can execute it using ./node_modules/<myPackage>/src/index.js, bu ...

Create a dynamic styled component with tags based on props

Looking to craft a dynamic tag using styled components, where the tag is passed in via props. Here's an example of the code: import * as React from 'react'; import styled from 'styled-components'; type ContainerProps = { chi ...

Minimize/Maximize Swagger Response Model Class View

After successfully integrating Swagger API documentation with my rest services, I encountered a challenge. The Swagger page appears too lengthy due to the numerous response classes in my project, requiring users to scroll extensively to find information. ...

Utilizing Array Notation in Typescript to Retrieve Elements from Class

In my programming project, I am working with two classes: Candles and Candle. The Candles class includes a property called list, which is an array containing instances of the Candle class. class Candles { public list: Array<Candle>; } class Candl ...

Error: the variable is not defined in the "onclick" event

I'm in the process of creating several buttons, each linked to a distinct modal element. I want to achieve this by using their id. However, I'm facing difficulties when trying to reference the variable from the typescript file. Although I don&ap ...

ASP.NET is being used to host an angular application, but the deployUrl feature is

I have a .NET 6.0 ASP.NET application where I've set up a route /ngxapp to serve my Angular 13 application. The Angular app is stored in the wwwroot/ngxapp folder, as shown below. I've been using this code for years to deliver the Angular app: ...

Is there a way to showcase all components on a single page in Angular 2 without needing to bootstrap them in appModule?

Is there a way to showcase all my Angular 2 components on one page without having to bootstrap them individually in AppModule.ts? I'm looking for a solution using router-outlet or parent-child relationships. Any guidance on how to achieve this after s ...

The Jest type definitions seem to be malfunctioning in this TypeScript project

Recently, I began a new Typescript project utilizing GTS. While the typings are functioning correctly for regular *.ts files, I am encountering difficulties in getting *.spec.ts files to work. Issue Each jest function is being flagged as red by ESLint wit ...

Classifying Union Types based on their distinct characteristics

There is a specific type with its own unique property (method) type Functions = { method: "connect", request: number, response: number, } | { method: "remove", request: string, response: string, } I aim to create a function that can handle inp ...

Issue: The installation of "pre" versions of node is not permitted, please utilize the --nodedir flag as an alternative

I am currently working on installing opencv for node.js. It seems that the issue lies with node-gyp rather than opencv itself. While I was successful in installing opencv on my Mac, I encountered an error when attempting the same installation on an Ubuntu ...

What is the best way to pass the modal dialog parameter sent from HTML to the TypeScript page?

I have implemented a dialog window using Angular where it opens by passing a parameter in the HTML side along with a transaction. To further enhance the functionality of my page, I want to incorporate the fab button. However, I am facing a challenge in sen ...

Divide the code into individual components within Angular 2 projects

I currently have 3 Angular 2 projects developed in TypeScript. Each project contains the same models and services. I would like to find a way to integrate these common elements at a global level and connect them with each individual project. Any suggesti ...

Is there a way to check for keys in a TypeScript object that I am not familiar with?

I have a good understanding of the unknown type in TypeScript. I am dealing with untrusted input that is typed as unknown, and my goal is to verify if it contains a truthy value under the key input.things.0. function checkGreatness(input: unknown) { retu ...

Encountered Error: Unknown property 'createStringLiteral', causing TypeError in the Broken Storyshots. This issue is happening while using version ^8.3.0 of jest-preset-angular

When I upgraded to jest-angular-preset ^8.3.0 and tried to execute structural testing with npm run, I encountered the following error: ● Test suite failed to run TypeError: Cannot read property 'createStringLiteral' of undefined at Obje ...

Issue with Angular: boolean value remains unchanged

Currently, I'm encountering an issue with my application. My objective is to establish a list containing checkboxes that toggle their values between true and false when clicked. Sounds simple enough, right? Below is the HTML code snippet: <l ...

What might be the reason for my react-bootstrap modal not applying any styling?

I have two projects, one created by following a tutorial series and the other created independently later on, aiming to replicate the first project. I have narrowed down my issue to a basic comparison of index.js in both projects. This code is an edited v ...

Using Angular 2 to execute an interface while making an HTTP GET request

I've managed to successfully retrieve and display data from a JSON object using *ngFor in Angular. However, I am struggling with applying an interface to the retrieved data. This is the content of my interface file: import {Offer} from './offer ...

Learn how to send or submit data using the Form.io form builder

I am currently working on a dynamic drag and drop form builder, and I'm struggling to figure out how to log the data from the form. Below is the component.html file where I am implementing the drag and drop form: <div> <form-builder ...

Having trouble with Heroku deployment? Unsure of the correct way to deploy your Angular App + NodeJs?

Here's a recent log using heroku logs --tail I'm facing some issues and not sure what's wrong :( 2019-07-23T14:46:07.163085+00:00 app[api]: Release v1 created by user ************************* 2019-07-23T14:46:07.163085+00:00 app[api]: Ini ...

Dealing with errors from Node.js spawnSync function

When running the "npm publish" command from a gulp task, I have encountered an issue with handling any errors that may be thrown by the npm command itself. If I use the following code: var cmd = spawnSync('npm.cmd', ['publish', packag ...