feat(angular): add angular httpResource support

.vscode/settings.json

@@ -30,5 +30,8 @@
   },
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

.yarnrc.yml

@@ -11,7 +11,6 @@ enableScripts: false
 npmPublishAccess: public
 npmRegistryServer: https://registry.npmjs.org
 
-# https://yarnpkg.com/features/catalogs
 catalog:
   eslint: 9.39.2
   '@eslint/js': 9.39.2
@@ -23,18 +22,31 @@ catalog:
   '@types/node': 22.18.12
   '@scalar/openapi-types': 0.5.3
 
+# https://yarnpkg.com/features/catalogs
 # using named catalogs to align packages in /tests with /samples
 catalogs:
   angular:
     # Runtime packages kept in sync (https://github.com/angular/angular/blob/main/tools/bazel/npm_packages.bzl)
-    '@angular/core': 20.3.16
-    '@angular/common': 20.3.16
-    '@angular/compiler': 20.3.16
-    '@angular/compiler-cli': 20.3.16
-    '@angular/animations': 20.3.16
-    '@angular/platform-browser': 20.3.16
-    '@angular/forms': 20.3.16
-    '@angular/router': 20.3.16
+    '@angular/core': 21.1.0
+    '@angular/common': 21.1.0
+    '@angular/compiler': 21.1.0
+    '@angular/compiler-cli': 21.1.0
+    '@angular/animations': 21.1.0
+    '@angular/platform-browser': 21.1.0
+    '@angular/forms': 21.1.0
+    '@angular/router': 21.1.0
     # Build tooling uses last available patch
-    '@angular/build': 20.3.14
-    '@angular/cli': 20.3.14
+    '@angular/build': 21.1.0
+    '@angular/cli': 21.1.0
+    # Linting (Angular ESLint)
+    '@angular-eslint/builder': 21.1.0
+    '@angular-eslint/eslint-plugin': 21.1.0
+    '@angular-eslint/eslint-plugin-template': 21.1.0
+    '@angular-eslint/template-parser': 21.1.0
+    # Angular related
+    '@tanstack/angular-query-experimental': 5.62.7
+    '@testing-library/angular': 19.0.0
+  build-tools:
+    tslib: 2.8.1
+  tooling:
+    rxjs: 7.8.2

README.md

@@ -80,6 +80,14 @@ corepack enable
 
 - **`yarn build`** - Build the project and make changes available to the workspace. Run this after making code changes to compile TypeScript and prepare the project for use.
 
+### Lint Scripts
+
+- **`yarn lint`** - Run lint checks across all packages.
+
+- **`yarn lint:samples`** - Run lint checks inside the samples workspaces.
+
+- **`yarn lint:generated`** - Lint generated fixtures in `tests/generated`.
+
 ### Test Scripts
 
 - **`yarn test`** - Run unit tests in all packages.
@@ -97,9 +105,11 @@ A typical development workflow would be:
 1. Make your code changes
 2. Run `yarn build` to compile your changes
 3. Run `yarn test` to ensure unit tests pass
-4. Run `yarn update-samples` to regenerate sample outputs
-5. Run `yarn test:samples` to verify samples work correctly
-6. Run `yarn test:cli` to validate TypeScript compilation
+4. (Optional) Run `yarn lint` to validate packages
+5. (Optional) Run `yarn lint:samples` and `yarn lint:generated` to validate generated outputs
+6. Run `yarn update-samples` to regenerate sample outputs
+7. Run `yarn test:samples` to verify samples work correctly
+8. Run `yarn test:cli` to validate TypeScript compilation
 
 If you encounter issues or want to start completely fresh:
 

docs/content/docs/guides/angular.mdx

@@ -1,9 +1,9 @@
 ---
 title: Angular
-description: Generate Angular services with HttpClient from OpenAPI
+description: Generate Angular services with HttpClient and httpResource functions from OpenAPI
 ---
 
-Generate fully typed Angular services using HttpClient from your OpenAPI specification.
+Generate fully typed Angular services using HttpClient or signal-first `httpResource` functions from your OpenAPI specification.
 
 ## Configuration
 
@@ -30,20 +30,111 @@ export default defineConfig({
 
 ## Generated Output
 
-The Angular client generates two classes:
+When using the default HttpClient output, the Angular client generates two classes:
 
 1. **Abstract class** — Contains the service definition
 2. **Service class** — Contains the implementation
 
-Add the service to your module's providers to use it:
+Register the service via DI (standalone or module-based apps both work):
+
+```ts title="app.config.ts"
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
 
-```ts title="app.module.ts"
 import { PetstoreService } from './api/petstore';
 
-@NgModule({
-  providers: [PetstoreService],
-})
-export class AppModule {}
+export const appConfig: ApplicationConfig = {
+  providers: [provideHttpClient(), PetstoreService],
+};
+```
+
+If you use `httpResource`, Orval also generates signal-first resource functions
+for eligible operations while keeping HttpClient methods for requests that need
+explicit bodies or request options.
+
+## httpResource Output (Angular v19.2+)
+
+Enable the experimental `httpResource` client via `override.angular.client`:
+
+```ts title="orval.config.ts"
+import { defineConfig } from 'orval';
+
+export default defineConfig({
+  petstore: {
+    output: {
+      mode: 'tags-split',
+      target: 'src/api/http-resource/petstore.ts',
+      schemas: 'src/api/model',
+      client: 'angular',
+      override: {
+        angular: {
+          client: 'httpResource',
+        },
+      },
+    },
+    input: {
+      target: './petstore.yaml',
+    },
+  },
+});
+```
+
+Generated resource functions use signals and return `HttpResourceRef<T>`:
+
+```ts title="pets.service.ts"
+export function showPetByIdResource(
+  petId: Signal<string>,
+): HttpResourceRef<Pet | undefined> {
+  return httpResource<Pet>(() => `/pets/${petId()}`);
+}
+```
+
+## httpResource + Zod Runtime Validation
+
+When `schemas.type` is set to `zod`, Orval automatically adds
+`{ parse: <ZodSchema>.parse }` for JSON responses in httpResource output. This
+validates responses at runtime before they reach your component.
+
+> [!NOTE]
+> Zod is a runtime dependency when you enable `schemas.type: 'zod'`.
+> Make sure your app installs `zod` (for example, `zod` in `dependencies`).
+
+```ts title="orval.config.ts"
+import { defineConfig } from 'orval';
+
+export default defineConfig({
+  petstore: {
+    output: {
+      mode: 'tags-split',
+      target: 'src/api/http-resource-zod/petstore.ts',
+      schemas: {
+        type: 'zod',
+        path: 'src/api/model-zod',
+      },
+      client: 'angular',
+      override: {
+        angular: {
+          client: 'httpResource',
+          runtimeValidation: true,
+        },
+      },
+    },
+    input: {
+      target: './petstore.yaml',
+    },
+  },
+});
+```
+
+If you need to disable automatic Zod parsing, set `runtimeValidation: false`:
+
+```ts title="orval.config.ts"
+override: {
+  angular: {
+    client: 'httpResource',
+    runtimeValidation: false,
+  },
+},
 ```
 
 ## Setting the Backend URL

package.json

@@ -32,6 +32,7 @@
     "test:ci": "CI=true yarn test && yarn test:cli && yarn test:samples",
     "lint": "turbo run lint --filter='./packages/*' --filter=!@orval/mock --filter=!@orval/core --filter=!@orval/zod --filter=!@orval/solid-start",
     "lint:samples": "turbo run lint --filter='./samples/**'",
+    "lint:generated": "turbo run lint:generated --filter='./tests'",
     "dev": "turbo run dev --filter='./packages/*'",
     "clean": "rimraf .turbo",
     "clean:all": "yarn workspaces foreach -A run clean",

packages/angular/README.md

@@ -1,21 +1,20 @@
+# Orval Angular
+
 [![npm version](https://badge.fury.io/js/orval.svg)](https://badge.fury.io/js/orval)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![tests](https://github.com/orval-labs/orval/actions/workflows/tests.yaml/badge.svg)](https://github.com/orval-labs/orval/actions/workflows/tests.yaml)
 
-<p align="center">
-  <img src="./logo/orval-logo-horizontal.svg?raw=true" width="500" height="160" alt="orval - Restfull Client Generator" />
-</p>
-<h1 align="center">
-  Visit <a href="https://orval.dev" target="_blank">orval.dev</a> for docs, guides, API and beer!
-</h1>
+![orval - Restful Client Generator](./logo/orval-logo-horizontal.svg?raw=true)
+
+Visit [orval.dev](https://orval.dev) for docs, guides, API and beer!
 
-### Code Generation
+## Code Generation
 
 `orval` generates type-safe JS clients (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in `yaml` or `json` formats.
 
 `Generate`, `valid`, `cache` and `mock` in your React, Vue, Svelte and Angular applications all with your OpenAPI specification.
 
-### Samples
+## Samples
 
 You can find below some samples
 

packages/angular/src/constants.ts

@@ -0,0 +1,52 @@
+import type { GeneratorDependency } from '@orval/core';
+
+export const ANGULAR_HTTP_CLIENT_DEPENDENCIES = [
+  {
+    exports: [
+      { name: 'HttpClient', values: true },
+      { name: 'HttpHeaders' },
+      { name: 'HttpParams' },
+      { name: 'HttpContext' },
+      { name: 'HttpResponse', alias: 'AngularHttpResponse' }, // alias to prevent naming conflict with msw
+      { name: 'HttpEvent' },
+    ],
+    dependency: '@angular/common/http',
+  },
+  {
+    exports: [
+      { name: 'Injectable', values: true },
+      { name: 'inject', values: true },
+    ],
+    dependency: '@angular/core',
+  },
+  {
+    exports: [{ name: 'Observable', values: true }],
+    dependency: 'rxjs',
+  },
+  {
+    exports: [{ name: 'DeepNonNullable' }],
+    dependency: '@orval/core',
+  },
+] as const satisfies readonly GeneratorDependency[];
+
+export const ANGULAR_HTTP_RESOURCE_DEPENDENCIES = [
+  {
+    exports: [
+      { name: 'httpResource', values: true },
+      { name: 'HttpResourceRef' },
+      { name: 'HttpResourceRequest' },
+      { name: 'HttpHeaders' },
+      { name: 'HttpParams' },
+      { name: 'HttpContext' },
+    ],
+    dependency: '@angular/common/http',
+  },
+  {
+    exports: [{ name: 'Signal', values: true }, { name: 'ResourceStatus' }],
+    dependency: '@angular/core',
+  },
+  {
+    exports: [{ name: 'DeepNonNullable' }],
+    dependency: '@orval/core',
+  },
+] as const satisfies readonly GeneratorDependency[];