GuidesClient TemplatesTypeScript Angular

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:

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

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 class ApiModule as an NgModule
  • ./client.service.ts: exports a class ApiClient as injectable Angular service
  • ./models.ts: exports typescript types
  • ./schemas.ts: exports runtime parsers using the chosen schema-builder (default zod)

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)
      }
    })
  }
}
Extract Inline SchemasTypeScript Axios