The openapi generator for typescript-angular appends numerical suffixes to the end of method names

Description I've come across an exposed file in a spring boot server and am utilizing a script to create a typescript angular client. The command being used is: openapi-generator-cli generate -g typescript-angular -i ./src/app/data/open-api.json -o ./src/app/data/build/openapi. There seems to be duplicated api names within the system.

Simple Structure

Controller1 : [get,list,delete,... ....] Controller2 : [get,list,delete,... ....] .....

The resulting classes show:

Controller1Service{
public get1 ....
public list1 .....
}
Controller2Service{
public get2 ....
public list2 .....
}

Despite the functions being unique within the same controller, the generator continues to append numbers to them.

OpenAPI Generator Version 4.3.1 is being utilized via npm cli.

Content of OpenAPI declaration file or url and the command line for generation: openapi-generator-cli generate -g typescript-angular -i ./src/app/data/open-api.json -o ./src/app/data/build/openapi

Is there any way to eliminate these added numbers? Updating the backend may result in changes to these numbers, necessitating manual code modifications.

angulartypescriptopenapi-generator

Answer №1

Extracting numbers from the 'nickname' attribute is a process outlined in the template.

Within the inner workings of OpenAPI, this correlation is generated from the operationId during the creation of the open-api.json file.

A workaround for Spring Boot (and similar frameworks) involves adjusting the generation of operationId (original answer).

To ensure that the generated code aligns with a standardized interface (particularly when using generic Spring controllers), it's crucial that the operationId corresponds to a certain reference point (typically the method name). Below is the approach I implemented (utilizing ChangeController.class as a generic basis for about 80% of the API).

@Bean
public OperationCustomizer operationIdCustomizer() {
    return (operation, handlerMethod) -> {
        Class<?> superClazz = handlerMethod.getBeanType().getSuperclass();
        if (Objects.nonNull(superClazz) && superClazz.isAssignableFrom(ChangeController.class)) {
            operation.setOperationId(String.format("%s", handlerMethod.getMethod().getName()));
        }
        return operation;
    };
}

IMPORTANT NOTE: enabling this implementation may trigger validation errors during spec generation for the Angular client; consider disabling explicit validation (skipValidateSpec).

In order for the generation process to function seamlessly with Angular 10 and beyond, openapi-generator version 5.0.0 is mandatory (to leverage generic ModuleWithProviders).

<plugin>
    <groupId>org.openapitools</groupId>
    <artifactId>openapi-generator-maven-plugin</artifactId>
    <version>5.0.0</version>
    <executions>
        <execution>
            <goals>
                <goal>generate</goal>
            </goals>
            <configuration>
                <inputSpec>${project.basedir}/../sic-frontend/src/app/api/openapi.json</inputSpec>
                <generatorName>typescript-angular</generatorName>
                <output>${project.basedir}/../sic-frontend/src/app/api</output>
                <skipValidateSpec>true</skipValidateSpec>
                <configOptions>
                    <ngVersion>10.0.0</ngVersion>
                </configOptions>

            </configuration>
        </execution>
    </executions>
</plugin>

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

Using TypeORM's QueryBuilder to select a random record with a nested relation

Imagine a scenario where I have the following entities: User @Entity('user', { synchronize: true }) export class UserEntity { @PrimaryGeneratedColumn('uuid') id: string; @Column() firstName: string; @Column() lastName: s ...

typescriptnestjsquery-buildertypeorm

Can TypeScript verify the types of string aliases during typing?

Consider the following code snippet: type Firstname = string type Surname = string const firstname: Firstname = "John"; const surname:Surname = "Smith" function print(name: Firstname) { console.log(name) } /* * This should give a compile error * ...

typescript

Serve both .ts and .js files to the browser using RequireJs

In my ASP.NET Core Project, the following files are present: greet.ts export class WelcomMesssage { name: string; constructor(name: string) { this.name = name; } say(): void { console.log("Welcome " + this.name); } } GreetExample.ts import * as ...

typescriptrequirejs

Loading AngularJS multiple times

I'm facing a challenge while upgrading my angularJs Application to Webpack4. This is how I've set it up: vendor.ts import "angular"; import "angular-i18n/de-de"; import "angular-route"; and main.ts import {MyAppModule} from "./my-app.app"; ...

angularjstypescriptwebpack-4

Create a function that recursively maps data across multiple levels

Currently, I have a data mapping function that can take JSON data with up to four levels and transform it into a different format. The input JSON format looks like this: [{ "InventoryLevel2Id": "1234", "InventoryLevel2Information": "Test Data", ...

javascripttypescriptrecursioncallback

What is the best way to retrieve an array that was created using the useEffect hook in React?

Utilizing the power of useEffect, I am fetching data from two different APIs to build an array. My goal is to access this array outside of useEffect and utilize it in the return statement below to render points on a map. However, when trying to access it ...

javascriptreactjstypescript

All components have been brought in, however, Nest is struggling to resolve the dependencies required by the stripePaymentService

I'm currently in the process of integrating the Stripe payment gateway with NestJS. I've encountered an error message stating "Nest can't resolve dependencies of the stripePaymentService". Even though I'm familiar with this type of erro ...

javascriptnode.jstypescriptstripe-paymentsnestjs

Does not have any exported elements

Recently, I've started learning Typescript and experimenting with express js. However, I’ve encountered a problem where the server displays an error message stating that '...../routes.ts' has no exported member 'router'. Despite ...

node.jstypescriptexpress

Expanding a TypeScript interface across different modules

For my project, I am working with Highcharts typings and encountered a need to extend certain object/interfaces it defines by adding some custom properties. Here is an example: declare namespace Chart { interface ChartOptions extends Highcharts.ChartOpt ...

angulartypescripthighchartstypescript-typings

Horizontal chip list in Material Angular 6 displayed as a sleek single-line design

Is it possible to implement a horizontal chip list in Material Angular that scrolls horizontally instead of expanding into multiple rows? ...

angulartypescriptangular-material

Steps for numbering a list with multiple ngfors within a div using Angular

How can I ensure that multiple ngfors output an undefined number of results listed in a specific format with incremental numbering? EXPECTED OUTPUT: 1. Object 1 News: Object 1 Stuff 2. Object 1 News: Object 1 Stuff 3. Object 1 News: Object 1 Stuff ...

angular

Next.js typescript tutorial on controlling values with increment and decrement buttons

I'm just starting to learn typescript and I'm looking to implement increment and decrement buttons in a next.js project that's using typescript. export default function Home() { return ( <div className={styles.container}> ...

reactjstypescriptnext.js

There seems to be an issue with the functionality of Angular Material in Angular9

I've encountered an issue with the material form field, even after importing the necessary modules. Surprisingly, there are no console errors to provide more insight into the problem. { "name": "online-shop", "version": "0.0.0", "scripts": ...

htmlangularangular-materialhtml5-canvasangular9

Angular open component in a new tab without initializing the entire application

One challenge I'm facing in my Angular 10 application is opening a component in a new browser tab without having to bootstrap the entire app again and create another instance. I need a solution that doesn't involve creating multiple app instances ...

angularbrowser-tab

Can you explain the purpose of the curly braces found in a function's parameter definition?

I am currently working on an Angular 5 project and came across this intriguing Typescript code snippet. (method) CreateFlightComponent.handleSave({ currentValue, stepIndex }: { currentValue: Partial<Flight>; stepIndex: number; }): void Can ...

typescriptdestructuring

Is there a advantage to using Angular's component style encapsulation for improved performance?

Recently, I came across the styling methods of Angular 2 which allows you to directly include your styles within the component. If you want to explore more on this topic, check out loading styles. There are two options for style encapsulation in Angular 2 ...

cssangularsassencapsulation

Are references in typescript case-sensitive when typing?

In my project using TypeScript in Visual Studio 2015, I have files with a mix of lower and uppercase letters in their names, like "project/Models/myFile.ts". When importing something from another module/file, I typically use drag and drop in Visual Studio ...

windowsimporttypescriptvisual-studio-2015naming-conventions

Typescript's Accessor decorator ensures that the decorated code is executed only once, fetching the previously calculated value for any subsequent calls

The topic discussed here originates from a previous discussion on a method decorator in Typescript. In some scenarios, there are `get` methods in a Typescript class that involve intensive computations. Some of these methods always return the same result an ...

typescriptclassdecoratoraccessortypescript-decorator

Display database information on the webpage

I've been attempting to display information from my database on an HTML page but it doesn't seem to be working. Below is the code snippet from my HTML file. The database is named softball_leagues and the table is called players, referred to as th ...

htmlmysqlangular

I am struggling to understand why the component.service is different from the service

After trying multiple approaches, I am still unable to identify the issue. This is the progress I have made so far: it('should load the current serviceData', fakeAsync( inject([Service1], (service1: Service1) => { // spyOn(service1, &apo ...

angularjasminekarma-jasmineangular15