⚡Examples • 📝Documentation • 🐛Issues
npm install ng-openapi --save-dev
# or
yarn add ng-openapi --devCreate a configuration file (e.g., openapi.config.ts):
import { GeneratorConfig } from "ng-openapi";
const config: GeneratorConfig = {
input: "./swagger.json",
output: "./src/api",
options: {
dateType: "Date",
enumStyle: "enum",
generateEnumBasedOnDescription: true,
generateServices: true,
customHeaders: {
"X-Requested-With": "XMLHttpRequest",
Accept: "application/json",
},
responseTypeMapping: {
"application/pdf": "blob",
"application/zip": "blob",
"text/csv": "text",
},
customizeMethodName: (operationId) => {
const parts = operationId.split("_");
return parts[parts.length - 1] || operationId;
},
},
};
export default config;Then run:
# Direct command
ng-openapi -c openapi.config.ts
# Or with the generate subcommand
ng-openapi generate -c openapi.config.ts# Generate both types and services
ng-openapi -i ./swagger.json -o ./src/api
# Generate only types
ng-openapi -i ./swagger.json -o ./src/api --types-only
# Specify date type
ng-openapi -i ./swagger.json -o ./src/api --date-type string-c, --config <path>- Path to configuration file-i, --input <path>- Path to Swagger/OpenAPI specification file-o, --output <path>- Output directory (default:./src/generated)--types-only- Generate only TypeScript interfaces--date-type <type>- Date type to use:stringorDate(default:Date)
input- Path to your Swagger/OpenAPI specification fileoutput- Output directory for generated files
dateType- How to handle date types:'string'or'Date'(default:'Date')enumStyle- Enum generation style:'enum'or'union'(default:'enum')generateEnumBasedOnDescription- Parse enum values from description field (default:true)generateServices- Generate Angular services (default:true)customHeaders- Headers to add to all HTTP requestsresponseTypeMapping- Map content types to Angular HttpClient response typescustomizeMethodName- Function to customize generated method namescompilerOptions- TypeScript compiler options for code generation
output/
├── models/
│ └── index.ts # TypeScript interfaces/types
├── services/
│ ├── index.ts # Service exports
│ └── *.service.ts # Angular services
├── tokens/
│ └── index.ts # Injection tokens
├── utils/
│ ├── date-transformer.ts # Date transformation interceptor
│ └── file-download.ts # File download helpers
├── providers.ts # Provider functions for easy setup
└── index.ts # Main exports
The simplest way to integrate ng-openapi is using the provider function:
// In your app.config.ts
import { ApplicationConfig } from "@angular/core";
import { provideNgOpenapi } from "./api/providers";
export const appConfig: ApplicationConfig = {
providers: [
// One-line setup with automatic interceptor configuration
provideNgOpenapi({
basePath: "https://api.example.com",
}),
// other providers...
],
};That's it! This automatically configures:
- ✅ BASE_PATH token
- ✅ Date transformation interceptor (if using Date type)
// Disable date transformation
provideNgOpenapi({
basePath: "https://api.example.com",
enableDateTransform: false,
});
// Async configuration
provideNgOpenapiAsync({
basePath: () => import("./config").then((c) => c.apiConfig.baseUrl),
});import { Component, inject } from "@angular/core";
import { toSignal } from "@angular/core/rxjs-interop";
import { UserService } from "./api/services";
import { User } from "./api/models";
@Component({
selector: "app-users",
template: `...`,
})
export class UsersComponent {
private readonly userService = inject(UserService);
readonly users = toSignal(this.userService.getUsers());
}import { Component, inject } from "@angular/core";
import { downloadFileOperator } from "./api/utils/file-download";
export class ReportComponent {
private readonly reportService = inject(ReportService);
downloadReport() {
this.reportService.getReport("pdf", { reportId: 123 }).pipe(downloadFileOperator("report.pdf")).subscribe();
}
}Add these scripts to your package.json:
{
"scripts": {
"generate:api": "ng-openapi -c openapi.config.ts"
}
}