api-client-generator
Advanced tools
Weekly downloads
Changelog
Readme
Angular REST API client generator from Swagger YAML or JSON file with camel case settings
This package generates an Angular TypeScript class 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).
This tool provides an easy and sustainable solution for making the classic REST API feel like you wish it has felt in TypeScript.
It starts by having the same data models at front-end and back-end, then continues with API client interface in form of service build on Angular HTTP client. Everything is typed and described in the way developer don't even need to study the API endpoints.
All you need to set it up is an up to date swagger file and Angular project.
A lot of developers is struggling with how to properly use the REST API in their apps. In Angular, we have a great opportunity which is HTTP Client supporting types. It is a great experience when you can work on a project where your models and data service are pre-generated and you can focus on state management, UI and business logic.
This generator focuses on supporting latest Angular/RxJS versions.
Angular 9+
RxJS 6+ (Observable imports)
If you need compatibility for Angular 7 and less, It might require some additional steps. In case of problems try editing necessary imports manually or downgrading to older generator versions (4.6.0 and bellow), although it is not recommended as patches and fixes might not be present in older versions.
See the Changelog to keep up with the features and changes.
This command will generate API client described in the swagger.json file to the ./output
folder.
npx api-client-generator -s ./path/to/swagger.json -o ./output
This command will do the same, but it will split all of the tags to separate API services and models folder will be shared. All will be generated to specified path and that is ./src/api
folder.
npx api-client-generator -t all -s ./path/to/swagger.yaml -o ./src/api"
npm install api-client-generator --save-dev
package.json
scripts."scripts": {
"generate-api-client": "api-client-generator -s ./swagger.yaml -o ./output-folder"
},
Recommended:
-t all
) option to generate all (or list of specific) services separately"scripts": {
"generate-api-client": "api-client-generator -s ./swagger.yaml -o ./output-folder -t all"
},
npm run generate-api-client
NOTE: if you want to skip the installation for project, you can use npx
but be careful as you'll be using the latest version every time you run the script (We use SEMVER so it is safer to update over the time).
Option | Description |
---|---|
-h /--help | print help and exit |
-s /--source | path to the swagger file (YAML or JSON) |
-o /--output | path where the generated files should be emitted |
-C /--commit | git commit generated changes * |
-v /--verbose | supply stack traces with outputted error messages |
-t /--splitPathTags | generate services and models only for the specified tags. Use , as the separator for multiple tags |
use all to emit all as a service per tag | |
-m /--skipModule | skip creating the index file with module export |
* The author of the commit will be api-client-generator <api-client-generator@flowup.cz>
.
If there are any staged changes in your repository, the generator will halt pre-generation with an error to prevent including your changes in the automatic commit.*
APIClientModule
in your app.module.ts
(main module).forRoot
methodwindow.href
with a 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 {}
APIClient
service in your components/services/...@Component({
selector: 'my-component',
templateUrl: `
<div *ngFor="let user of users">
<p>User name: {{user.name}}</p>
</div>
`,
})
export class MyComponent {
users: User[] = [];
constructor(private readonly api: APIClient) {
this.api.getUsers().subscribe(users => (this.users = users));
}
}
example/
folderoutput
├─ models
│ ├─ some.enum.ts
│ ├─ some.model.ts
│ │ ...
│ ├─ another.model.ts
│ └─ index.ts
├─ api-client.interface.ts
├─ api-client.service.ts
└─ index.ts
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:
HttpClientModule
to your root module (see NgModule imports in usage)If some of your numeric enums look like this, the problem might be that in the swagger file you are not describing the keys properly.
export enum MyEnum {
0 = 0,
1 = 1,
2 = 2,
}
Fix We currently support two options:
['1 Foo', '2 Bar']
'x-enumNames'
custom property that should be in format ['Foo', 'Bar']
Please report any problems you have any issues you find so they can be resolved.
If the generator terminates with an error message, please re-run it with the -v
flag and post the outputted stack trace.
Feel free to discuss desired improvements or functionality in issues. Afterwards, the pull requests are very welcome.
If you are interested in contributing please follow these steps:
npm run dev:install
instead of npm install
to install all (even test) dependenciesnpm run tests
.
.
.
.
Inspired by swagger-js-codegen
Generator based on angular4-swagger-client-generator
FAQs
Angular REST API client generator from Swagger YAML or JSON file with camel case settings
The npm package api-client-generator receives a total of 476 weekly downloads. As such, api-client-generator popularity was classified as not popular.
We found that api-client-generator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.