Only some generated OpenApi Angular service functions are not defined when executing in browser

Question

Using the openapi.json created by my Spring backend I generated an API client:

java -jar openapi-generator-cli-7.4.0.jar generate -g typescript-angular -i ./openapi.json -c openapiconfig.json -o ./api

with openapiconfig.json

{
    "npmName": "angular-api",
    "fileNaming": "kebab-case"
}

The default angular version with this version of the openapi-generator is angular 17, so it results in the following package.json:

{
  "name": "typescript-angular-api",
  "version": "0.0.1",
  "scripts": {
    "build": "ng-packagr -p ng-package.json"
  },
  .....
  "peerDependencies": {
    "@angular/core": "^17.0.0",
    "rxjs": "^7.4.0"
  },
  "devDependencies": {
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/compiler-cli": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "ng-packagr": "^17.0.3",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^7.4.0",
    "typescript": ">=4.9.3 <5.3.0",
    "zone.js": "^0.14.0"
  }
}

This api is then consumed by my Angular 17 project that has standalone disabled (so I don't have to import the api module into every component; fast development is more important than performance in this project).

In my app.module.ts the API is imported:

@NgModule({
  declarations: [
    AppComponent,
.....
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ApiModule,
    FormsModule
  ],
  providers: [
    provideAnimationsAsync(),
    importProvidersFrom(HttpClientModule),
    {
      provide: BASE_PATH,
      useValue: 'http://localhost:8081',
    },
  ],
  bootstrap: [AppComponent]
})

The service I want to use is then registered in my component's constructor as usual and executed:

export class AppComponent {
  title = "my-app";

  constructor(private configurationService: ConfigurationServiceService) {}
// The service class is named "ConfigurationServiceService" because I already named it "ConfigurationService" in Spring, thus that name. That shouldn't be a problem


  ngOnInit(): void {
    this.configurationService.getProjects().subscribe({
      next: (projects: Project[]) => {
        console.log(project);
      },
    });
    this.configurationService.getProjectById(1).subscribe({
      next: (project: Project) => {
        console.log(project);
      },
    });
  }
}

Weird thing now is: The first function getProjects() is perfectly executed. It runs and returns its value. But the second function throws an error in the console saying the function is not a function:

main.ts:6 ERROR TypeError: this.configurationService.getProjectById is not a function
    at _AppComponent.ngOnInit (app.component.ts:22:31)
    at callHookInternal (core.mjs:5136:14)
    at callHook (core.mjs:5163:13)
    at callHooks (core.mjs:5118:17)
    at executeInitAndCheckHooks (core.mjs:5068:9)
    at refreshView (core.mjs:12351:21)
    at detectChangesInView$1 (core.mjs:12560:9)
    at detectChangesInViewWhileDirty (core.mjs:12277:5)
    at detectChangesInternal (core.mjs:12259:9)
    at detectChangesInView (core.mjs:31605:5)

Which is weird because both functions are defined in the api and VS Code also recognises both functions

getProjects(observe?: 'body', reportProgress?: boolean, options?: {
        httpHeaderAccept?: 'application/json';
        context?: HttpContext;
        transferCache?: boolean;
    }): Observable<Array<Project>>;
getProjects(observe?: 'response', reportProgress?: boolean, options?: {
        httpHeaderAccept?: 'application/json';
        context?: HttpContext;
        transferCache?: boolean;
    }): Observable<HttpResponse<Array<Project>>>;
getProjects(observe?: 'events', reportProgress?: boolean, options?: {
        httpHeaderAccept?: 'application/json';
        context?: HttpContext;
        transferCache?: boolean;
    }): Observable<HttpEvent<Array<Project>>>;
........
getProjectById(projectId: number, observe?: 'body', reportProgress?: boolean, options?: {
        httpHeaderAccept?: 'application/json';
        context?: HttpContext;
        transferCache?: boolean;
    }): Observable<Project>;
getProjectById(projectId: number, observe?: 'response', reportProgress?: boolean, options?: {
        httpHeaderAccept?: 'application/json';
        context?: HttpContext;
        transferCache?: boolean;
    }): Observable<HttpResponse<Project>>;
getProjectById(projectId: number, observe?: 'events', reportProgress?: boolean, options?: {
        httpHeaderAccept?: 'application/json';
        context?: HttpContext;
        transferCache?: boolean;
    }): Observable<HttpEvent<Project>>;

I was expecting both functions to work similarily. But apparently there is a difference between them that I cannot see. At first I thought there was some problem with the definition of the input parameter of getProjectById(), so I had a look at a different function that has an input param.

But this function works just fine:

this.xService.getX(this.y.id).subscribe({
      next: (a: X[]) => {
          console.log(a);
      },
    });

And this function works just fine.

So all of these services, classes and functions are automatically generated by openapi-generator. What could lead to some functions flawlessly and others to not be recognised at all?

Another guess was to check if something is wrong on the server side, but that's not the case as the function is already prevented from being executed in the browser as it's not recognised as a function.

UPDATE: I just built an API with openapi-generator while setting Angular version to 16, openapiconfig.json:

{
    "npmName": "vg-typescript-angular-api",
    "fileNaming": "kebab-case",
    "ngVersion": "16"
}

With this api client everything works perfectly. Seems to be a problem in openapi-generator with Angular 17.