OpenApi to Angular

Generate typed Angular services and DTOs/enums directly from a OpenApi/OpenAPI JSON document — one service file per controller, one file per model/enum.

Features

• Sidebar panel (its own icon in the Activity Bar) with a simple form:
  • OpenApi address — a local file path or an http(s):// URL (self-signed local dev certificates are accepted).
  • Output path — where the generated models/, services/, and core/ folders are written.
  • Custom templates folder (optional) — override any of the built-in .ejs templates with your own.
• Generate button that runs the generator and streams a live log into the panel.
• Settings are saved automatically (to your workspace settings if a folder is open, otherwise to your global user settings) — no need to retype them next time.
• Supports OpenApi 2.0 and OpenAPI 3.x, allOf inheritance, inline and named enums, nested objects, arrays, and file upload (multipart/form-data).

Usage

1. Click the OpenApi to Angular icon in the Activity Bar.
2. Fill in the openApi address and the output path.
3. (Optional) Point "Custom templates folder" at a folder containing any of: model.ejs, enum.ejs, alias.ejs, service.ejs, api-config.ejs, models-index.ejs, services-index.ejs. Only the files you provide are overridden — anything missing falls back to the built-in template.
4. Click Generate.

You can also run OpenApi to Angular: Generate from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).

Settings

After generating

In your Angular app's app.config.ts, provide the API base URL:

import { provideHttpClient } from '@angular/common/http';
import { API_BASE_URL } from './api/core/api-config';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    { provide: API_BASE_URL, useValue: environment.apiUrl },
    // or use factory 
    // { provide: API_BASE_URL, useFactory: () => AppConsts.remoteServiceBaseUrl },

  ],
};

Then inject any generated service normally:

import { inject } from '@angular/core';
import { UsersService } from './api/services';

export class UserListComponent {
  private readonly usersService = inject(UsersService);
  users$ = this.usersService.listUsers({ page: 1, pageSize: 20 });
}