api-client-generator

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

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).

Installation

Global usage:

[sudo] yarn global add api-client-generator

or

[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

yarn add api-client-generator

or

npm install api-client-generator

• 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

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

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: [
    APIClientModule.forRoot({
      domain: 'https://api.url', // or use value defined in environment `environment.apiUrl`
    }),
    /* ... other imports */
  ],
  /* ... 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)
    );
  }
}

---

Inspired by swagger-js-codegen

Generator based on angular4-swagger-client-generator