feat: Refactor Angular client integration and enhance error handling

examples/openapi-ts-angular/openapi-ts.config.ts

@@ -9,26 +9,15 @@ export default defineConfig({
     path: './src/client',
   },
   plugins: [
-    '@hey-api/client-angular',
-    '@hey-api/schemas',
     {
-      asClass: false,
-      classNameBuilder(name) {
-        return `${name}Service`;
-      },
-      methodNameBuilder(operation) {
-        return String(operation.id);
-      },
-      name: '@hey-api/sdk',
+      name: '@hey-api/client-angular',
+      // throwOnError: true,
     },
+    '@hey-api/schemas',
+    '@hey-api/sdk',
     {
       enums: 'javascript',
       name: '@hey-api/typescript',
     },
-    '@tanstack/angular-query-experimental',
-    {
-      asClass: true,
-      name: '@hey-api/angular-resource',
-    },
   ],
 });

examples/openapi-ts-angular/src/app/app.component.html

@@ -243,8 +243,9 @@
           <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
         </defs>
       </svg>
-      <h1>&#64;hey-api/openapi-ts 🤝 Angular</h1>
-      <button (click)="onGetPetById()" type="button">Get Random Pet</button>
+      <h1>{{ title }}</h1>
+
+      <app-demo />
     </div>
     <div class="divider" role="separator" aria-label="Divider"></div>
     <div class="right-side">

examples/openapi-ts-angular/src/app/app.component.ts

@@ -1,48 +1,15 @@
-import { HttpClient } from '@angular/common/http';
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
-import { getPetById } from '../client';
-import { createClient } from '../client/client';
-
-const localClient = createClient({
-  // set default base url for requests made by this client
-  baseUrl: 'https://petstore3.swagger.io/api/v3',
-  /**
-   * Set default headers only for requests made by this client. This is to
-   * demonstrate local clients and their configuration taking precedence over
-   * internal service client.
-   */
-  headers: {
-    Authorization: 'Bearer <token_from_local_client>',
-  },
-});
+import { Demo } from './demo/demo';
 
 @Component({
-  imports: [RouterOutlet],
+  host: { ngSkipHydration: 'true' },
+  imports: [RouterOutlet, Demo],
   selector: 'app-root',
   styleUrl: './app.component.css',
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  title = 'angular';
-
-  private http = inject(HttpClient);
-
-  async onGetPetById() {
-    this.http.get('', {});
-    const { data, error } = await getPetById({
-      client: localClient,
-      path: {
-        // random id 1-10
-        petId: Math.floor(Math.random() * (10 - 1 + 1) + 1),
-      },
-    });
-    if (error) {
-      console.log(error);
-      return;
-    }
-    console.log(data);
-    // setPet(data!);
-  }
+  title = '@hey-api/openapi-ts 🤝 Angular';
 }

examples/openapi-ts-angular/src/app/app.config.ts

@@ -7,6 +7,8 @@ import {
 } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
 
+import { client } from '../client/client.gen';
+import { provideHeyApiClient } from '../client/client/client.gen';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
@@ -15,5 +17,6 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     provideClientHydration(withEventReplay()),
     provideHttpClient(withFetch()),
+    provideHeyApiClient(client),
   ],
 };

examples/openapi-ts-angular/src/app/demo/demo.css

@@ -0,0 +1,156 @@
+/* Pet Card Styles */
+.pet-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border-radius: 16px;
+  padding: 1.5rem;
+  margin-top: 1.5rem;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition:
+    transform 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.pet-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.pet-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--red-to-pink-to-purple-horizontal-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pet-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pet-placeholder {
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.pet-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.pet-name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin: 0;
+}
+
+.pet-category {
+  font-size: 0.875rem;
+  color: var(--gray-700);
+  background: rgba(255, 65, 248, 0.1);
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  display: inline-block;
+  width: fit-content;
+}
+
+/* Error Message Styles */
+.error-message {
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  border: 1px solid #fecaca;
+  border-radius: 12px;
+  padding: 1rem;
+  margin-top: 1.5rem;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
+}
+
+.error-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #dc2626;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.error-title::before {
+  content: '⚠️';
+  font-size: 1.125rem;
+}
+
+.error-details {
+  font-size: 0.875rem;
+  color: #991b1b;
+  background: rgba(239, 68, 68, 0.05);
+  padding: 0.75rem;
+  border-radius: 8px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-left: 3px solid #ef4444;
+}
+
+/* Button Styles Enhancement */
+button {
+  background: var(--red-to-pink-to-purple-horizontal-gradient);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 120ms ease;
+  margin-top: 1rem;
+  margin-right: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+button:active {
+  transform: translateY(0);
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 650px) {
+  .pet-card {
+    padding: 1rem;
+    margin-top: 1rem;
+  }
+
+  .pet-info {
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+  }
+
+  .pet-avatar {
+    width: 80px;
+    height: 80px;
+    align-self: center;
+  }
+
+  .error-message {
+    padding: 0.75rem;
+    margin-top: 1rem;
+  }
+}

examples/openapi-ts-angular/src/app/demo/demo.html

@@ -0,0 +1,37 @@
+<button (click)="onGetPetById()" type="button">Get Random Pet</button>
+<button (click)="onGetPetByIdLocalClient()" type="button">
+  Get Random Pet (local client)
+</button>
+
+<!-- Error Display -->
+@if (error()) {
+<div class="error-message">
+  <div class="error-title">Error occurred:</div>
+  <div class="error-details">{{ error()?.error }}</div>
+</div>
+}
+
+<!-- Pet Display Card -->
+@if (pet()) {
+<div class="pet-card">
+  <div class="pet-info">
+    <div class="pet-avatar">
+      @if (pet()?.photoUrls?.[0]) {
+      <img
+        [src]="pet()?.photoUrls?.[0]"
+        [alt]="pet()?.name || 'Pet'"
+        class="pet-image"
+      />
+      } @else {
+      <div class="pet-placeholder">{{ pet()?.name?.slice(0, 1) || 'N' }}</div>
+      }
+    </div>
+    <div class="pet-details">
+      <div class="pet-name">Name: {{ pet()?.name || 'N/A' }}</div>
+      <div class="pet-category">
+        Category: {{ pet()?.category?.name || 'N/A' }}
+      </div>
+    </div>
+  </div>
+</div>
+}