[BUG] OpenApi Generated ApiModule doesn’t register when declared in node_modules but works outside that folder

Asked on stackoverflow too https://stackoverflow.com/questions/70700113/in-angualr-why-openapi-generated-apimodule-doesn-t-register-when-declared-in-nod

Description

I’m having an issue. I need to consume OpenApi Generated files (services, interfaces) via NPM package. The problem it doesn’t work when it’s in node_modules, but if I move it outside this folder it works. ApiModule comes as undefined when in node_modules for some reason. Github link in the bottom is documentation how to use it.

I have tried this on 2 different machines running Angular 12 (Node.js v12 and v16) with:

• my locally generated file;
• “npm typescript-codegen-petstore” downloaded (requires adding override keyword and adding in places it fails);
• https://github.com/OpenAPITools/openapi-generator/tree/master/samples/client/petstore/typescript-angular-v12-provided-in-root/builds/with-npm (https://download-directory.github.io to download this section)

If I put in a different folder than node_modules it works, inside it doesn’t. Any help or ideas? Thanks.

Generation Details

app.module.ts:30 Uncaught TypeError: Cannot read properties of undefined (reading 'forRoot')
    at Module.6747 (app.module.ts:30)
    at __webpack_require__ (bootstrap:19)
    at Module.4431 (environment.ts:16)
    at __webpack_require__ (bootstrap:19)
    at __webpack_exec__ (log$:23)
    at log$:23
    at Function.__webpack_require__.O (chunk loaded:23)
    at log$:23
    at webpackJsonpCallback (jsonp chunk loading:33)
    at main.js:1

Steps to reproduce

Download either

• “npm typescript-codegen-petstore” downloaded (requires adding override keyword and adding in places it fails);
• https://github.com/OpenAPITools/openapi-generator/tree/master/samples/client/petstore/typescript-angular-v12-provided-in-root/builds/with-npm (https://download-directory.github.io to download this section) and put in node_modules / install

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

////// added
import { HttpClientModule } from '@angular/common/http';
import {
  ApiModule,
  Configuration,
  ConfigurationParameters,
} from 'client-petstore';


export function apiConfigFactory(): Configuration {
  const params: ConfigurationParameters = {
    basePath: 'https://localhost:4200',
  };
  return new Configuration(params);
}
////// end

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ////// added
    ApiModule.forRoot(apiConfigFactory),
    HttpClientModule
    ////// end
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[localrivet]

Any update on this?

from my end? no, I hit dead end before posting over here and nobody has pointed any mistakes in my process yet. I did see swagger-api/swagger-codegen#10908 (comment) but nothing came out of it too

@githubLurk

I ran into this same issue today and this link help me solve it. https://github.com/angular/angular-cli/issues/20987

After executing openapi-generator generate -g typescript-angular -i my-swagger-generated.json -o ./outdir I wasn’t running npm run build.

After running npm run build from the same ./outdir a new directory is created called ./dist.

From inside the ./dist directory I executed my npm publish and that solved my issue.

Hope this helps.

[githubLurk]

Any update on this?

from my end? no, I hit dead end before posting over here and nobody has pointed any mistakes in my process yet. I did see https://github.com/swagger-api/swagger-codegen/issues/10908#issue-806851648 but nothing came out of it too