Angular 10 Swagger Codegen: Generic type ModuleWithProviders<T> requires 1 type argument(s)

Question

I am generating https://editor.swagger.io/ Codegen proxies. It is giving the following error in Angular 10. How can this be fixed?

Generic type 'ModuleWithProviders' requires 1 type argument(s).

export class ApiModule {
    public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders {
        return {
            ngModule: ApiModule,
            providers: [ { provide: Configuration, useFactory: configurationFactory } ]
        };
    }

    constructor( @Optional() @SkipSelf() parentModule: ApiModule,
                 @Optional() http: HttpClient) {
        if (parentModule) {
            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
        }
        if (!http) {
            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
            'See also https://github.com/angular/angular/issues/20575');
        }
    }
}

Pyelography

Answer 1

this error tells you that, the ModuleWithProviders class has 1 generic paramter. so you sould use it like ModuleWithProviders<T> where T is a type.

EDIT:

The class is defined like this:

interface ModuleWithProviders<T> {
  ngModule: Type<T>
  providers?: Provider[]
}

.

export class ApiModule {
  public static forRoot(configurationFactory: () => Configuration) : ModuleWithProviders<ApiModule> {
    return {
        ngModule: ApiModule,
        providers: [ { provide: Configuration, useFactory: configurationFactory } ]
    };
}

See Resource:

https://angular.io/guide/migration-module-with-providers

Helli

But from proper practice, we should not modify the codes generated from Swagger Codegen, any other approach to this solution? Maybe additional properties in swagger-codegen-cli command? – Engrossment

@Engrossment I agree, you can specify custom templates for swagger to use. See my reply for a solution that we use in production – Anther

Answer 2

io.swagger.swagger-codegen fully supports Angular 10 since version 2.4.17. In detail you can se the fix which was provided in this pull request.

As djf mentioned use the parameter --additional-properties ngVersion=10 when calling generate to tell io.swagger.swagger-codegen to use Angular 10.

Californium

FYI 3.x branch of CLI is completely broken github.com/swagger-api/swagger-codegen/issues/11094 – Buckwheat

Sucks that open api generator doesn't fix this. I would be up for switching to swagger codegen but all the windows users on my team struggle to use it. So not an option. – Degroot

Answer 3

We stumbled over the same issue. Luckily you can provide custom *.mustache templates to the swagger-codegen-cli using the -t switch (see the swagger doc).

Our adapted api.module.mustache looks like this:

import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
import { Configuration } from './configuration';
{{#useHttpClient}}import { HttpClient } from '@angular/common/http';{{/useHttpClient}}
{{^useHttpClient}}import { Http } from '@angular/http';{{/useHttpClient}}

{{#apiInfo}}
{{#apis}}
import { {{classname}} } from './{{importPath}}';
{{/apis}}
{{/apiInfo}}

@NgModule({
  imports:      [],
  declarations: [],
  exports:      [],
  providers: [
    {{#apiInfo}}{{#apis}}{{classname}}{{#hasMore}},
    {{/hasMore}}{{/apis}}{{/apiInfo}} ]
})
export class ApiModule {
    public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders<ApiModule> {
        return {
            ngModule: ApiModule,
            providers: [ { provide: Configuration, useFactory: configurationFactory } ]
        };
    }

    constructor( @Optional() @SkipSelf() parentModule: ApiModule,
                 @Optional() http: {{#useHttpClient}}HttpClient{{/useHttpClient}}{{^useHttpClient}}Http{{/useHttpClient}}) {
        if (parentModule) {
            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
        }
        if (!http) {
            throw new Error('You need to import the {{#useHttpClient}}HttpClientModule{{/useHttpClient}}{{^useHttpClient}}HttpModule{{/useHttpClient}} in your AppModule! \n' +
            'See also https://github.com/angular/angular/issues/20575');
        }
    }
}

The only change needed is to replace ModuleWithProviders by ModuleWithProviders<ApiModule>. Afterwards the generated api.module.ts will work with Angular 10.

Anther

Not sure how this works, but will give it a try, thanks! – Engrossment

@Engrossment our call looks like this: java -jar swaggercodegen.jar generate -l typescript-angular -i api-spec.yaml -o "${Temp}\src" --additional-properties ngVersion=10 -t "\Path\to\Templates\". The last parameter points Swagger to our custom template. The Directory contains a subdir 'angular' containing our modified module template file: angular/api.module.mustache. Make sure the directory and file names are correct. Otherwise Swagger will just ignore them. This is not documented well. I had to consult the Swagger source code to figure it out. – Anther

How exactly did you create the "api.module.mustache" file? I tried creating it but it ends up as ".txt" file extension – Engrossment

@Engrossment try renaming the file including the extension. That said, most text editors let you save a file with any given extension these days. – Anther

I tried with notepad++ but to no avail =/ any recommended text editors? – Engrossment

@Anther wrong, the directory SHOULD NOT contain a subdir. <templateDirectory>src/main/resources/codegen/typescript-angular</templateDirectory> Where my "typescript-angular" directory contains my updated "api.module.mustache" file. – Dionne