Using the typescript-angular template
⚠️
this is the least battle tested of the templates and most likely to have critical bugs
The typescript-angular template outputs a client SDK based on the Angular HttpClient that gives the following:
- Typed methods to call each endpoint returning an RxJS Observable
It does not yet support runtime validation/parsing - compile time type safety only at this stage.
See integration-tests/typescript-angular for more samples.
Install dependencies
First install the CLI to your project:
npm i --dev @nahkies/openapi-code-generatorSee also quick start guide
Run generation
OpenAPI3
npm run openapi-code-generator \
--input ./openapi.yaml \
--input-type openapi3 \
--output ./src/app/clients/some-service \
--template typescript-angular \
--schema-builder zodUsing the generated code
Running the above will output these files into ./src/app/clients/some-service:
./api.module.ts: exports a classApiModuleas anNgModule./client.service.ts: exports a classApiClientas injectable Angular service./models.ts: exports typescript types./schemas.ts: exports runtime parsers using the chosenschema-builder(defaultzod)
Once generated usage should look something like this:
// Root Angular module
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, ApiModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
// inject into your component
constructor(client: ApiClient) {
client.updateTodoListById({listId: "1", requestBody: {name: "Foo"}}).subscribe((next) => {
if (next.status === 200) {
// TODO: body is currently incorrectly `unknown` here
console.log(next.body.id)
}
})
}
}Last updated on