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 (opens in a new tab) that gives the following:
- Typed methods to call each endpoint returning an RxJS Observable (opens in a new tab)
It does not yet support runtime validation/parsing - compile time type safety only at this stage.
See integration-tests/typescript-angular (opens in a new tab) for more samples.
Install dependencies
Prerequisite installed the cli
There are no additional dependencies required for this template.
Run generation
npm run openapi-code-generator \
--input ./openapi.yaml \
--input-type openapi3 \
--output ./src/app/clients/some-service \
--template typescript-angular \
--schema-builder zod
Using the generated code
Running the above will output these files into ./src/app/clients/some-service
:
./api.module.ts
: exports a classApiModule
as anNgModule
./client.service.ts
: exports a classApiClient
as 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)
}
})
}
}