What is HTTP Resource Plugin?

The HTTP Resource plugin generates Angular services using the new experimental httpResource API instead of traditional HttpClient. This provides automatic caching, state management, and reactive data loading for your OpenAPI endpoints.

⚠️ Experimental Feature: httpResource is still experimental in Angular. Use with caution in production.

Installation

npm install @ng-openapi/http-resource ng-openapi --save-dev

Quick Start

1. Configure Plugin

// openapi.config.ts
import { GeneratorConfig } from 'ng-openapi';
import { HttpResourcePlugin } from '@ng-openapi/http-resource';

export default {
  input: './swagger.json',
  output: './src/api',
  clientName: 'NgOpenApi',
  plugins: [HttpResourcePlugin],
} as GeneratorConfig;

2. Generate Resources

ng-openapi -c openapi.config.ts

3. Setup Providers

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideDefaultClient } from './api/providers';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNgOpenApiClient({
      basePath: 'https://api.example.com'
    })
  ]
};

4. Use Generated Resources

import { Component, inject } from '@angular/core';
import { UsersResource } from './api/resources';

@Component({
  selector: 'app-users',
  template: `
    <div>
      @if (users.isLoading()) {
        <p>Loading...</p>
      }
      @if (users.error()) {
        <p>Error: {{ users.error() }}</p>
      }
      @for (user of users.value(); track user.id) {
        <div>{{ user.name }}</div>
      }
    </div>
  `
})
export class UsersComponent {
  private readonly usersResource = inject(UsersResource);
  
  // Automatic caching and reactive updates
  readonly users = this.usersResource.getUsers();
}

Generated Structure

src/api/
├── models/           # TypeScript interfaces
├── resources/        # HTTP Resource services
│   ├── index.ts      # Resource exports
│   └── *.resource.ts # Generated resources
├── services/         # Traditional HttpClient services
├── providers.ts      # Provider functions
└── index.ts         # Main exports

Documentation

• 📖 Full Documentation
• 🎯 Angular httpResource Guide
• 🚀 Live Examples