api-client-generator

Angular REST API client generator from Swagger YAML or JSON file with camel case settings

Generated files are compatible with Angular 6 (should be compatible with 5 version too). RxJS imports are targeted for version 6.

Description

This package generates a Angular TypeScript classes from a Swagger v2.0 specification file. The code is generated using Mustache templates.

The generated service class uses new HttpClient module of Angular (introduced in version 4.3).

Compatibility

• Angular 6 (should also work with 5 and 4.3+)
• RxJS 6 (Observable imports)
  • in case of rxjs <6 update or rewrite the rxjs import to match older version

Installation

Global usage:

[sudo] npm install -g api-client-generator

This command will generate API client described in swagger.json file to ./output folder

api-client-generator -s ./path/to/swagger.json -o ./output

Local usage

npm install api-client-generator --save-dev

• for quick usage create run script in your package.json scripts

"scripts": {
  "generate-api-client": "api-client-generator -s ./swagger.yaml -o ./output-folder"
},

• then just run

npm run generate-api-client

Options

• s - path to the swagger file (yaml or json)
• o - path where the generated files should be emitted

How to use generated client

1. import the APIClientModule in your app.module.ts (main module)

• domain and configuration should be passed to module imports using .forRoot method
• options and domain are optional
• when domain is not passed, host property form swagger file is used as default
  • if host property is not defined window.href with current port is used instead

@NgModule({
  imports: [
    /* Default configuration and all of it's properties is optional */
    APIClientModule.forRoot({
      domain: 'https://api.url', // or use value defined in environment `environment.apiUrl`
      httpOptions: {
        headers: {myCustomHeader: 'this will appear in every request as one of the headers'},
        params: {someParam: 'customParam'},
      }
    }),
    /* ... other imports */
    HttpClientModule, // <<= this is very important import
    // API client relies on HttpClient module and will throw and provider error if not there
  ],
  /* ... other stuff */
})
export class AppModule {
}

2. use APIClient service in your components/services/...

@Component({
  selector: 'my-component',
  templateUrl: `
    <div *ngFor="let user of users$ | async">
      <p>User name: {{user.name}}</p>
    </div>
  `,
})
export class MyComponent {
  
  users$ = this.api.getUsers();

  constructor(private readonly api: APIClient) {
    this.api.getSomething().subscribe(
      (something: Something) => console.log('something', something)
    );
  }
}

Generated structure

• if you are interested on how will the generated client with models look like, take a look in a example/ folder

output
 ├─ models
 │   ├─ some.enum.ts
 │   ├─ some.model.ts
 │   │  ...
 │   ├─ another.model.ts
 │   └─ index.ts
 ├─ api-client.service.ts
 └─ index.ts

Common problems

HttpClient not provided

This or very similar error means that you forgot to import HttpClientModule in your root module

StaticInjectorError(AppModule)[APIClient -> HttpClient]: 
  StaticInjectorError(Platform: core)[APIClient -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!

Fix:

• add HttpClientModule to your root module (see NgModule imports in usage)

Problem reporting and contributions

Please report any problems you have and issues you find so they can be resolved.

Feel free to discuss desired improvements or functionality in issues. Afterwards the pull requests are very welcome.

---

.

.

.

.

Inspired by swagger-js-codegen

Generator based on angular4-swagger-client-generator