Angular
A complete guide to using Invokix with an Angular project. Get TypeScript types and Zod schemas from your contract and use them directly in your services and components.
What Invokix generates for this stack
- TypeScript types for every schema in your contract
- Zod validation schemas for runtime type safety
- A shareable contract link for your team
Setup
1
Install dependencies
Terminal
npm install zod2
Pull your contract outputs
Terminal
npx invokix pullGenerated files
src/types/orders.ts — TypeScript types
src/schemas/orders.ts — Zod validation schemas3
Use types in your Angular service
src/app/orders/orders.service.ts
import { Injectable } from "@angular/core"
import { HttpClient } from "@angular/common/http"
import { Observable } from "rxjs"
import { map } from "rxjs/operators"
import type { Order, CreateOrderBody } from "@/types/orders"
import { OrderSchema } from "@/schemas/orders"
import { z } from "zod"
@Injectable({ providedIn: "root" })
export class OrdersService {
private baseUrl = "https://api.yourcompany.com"
constructor(private http: HttpClient) {}
getOrders(): Observable<Order[]> {
return this.http.get<Order[]>(this.baseUrl + "/orders").pipe(
map((data) => z.array(OrderSchema).parse(data))
)
}
createOrder(body: CreateOrderBody): Observable<Order> {
return this.http.post<Order>(this.baseUrl + "/orders", body).pipe(
map((data) => OrderSchema.parse(data))
)
}
}Keeping outputs in sync
Run npx invokix pull any time your backend team publishes a contract update. TypeScript will immediately surface any places in your Angular app that reference renamed or removed fields.
Terminal — after a contract update
npx invokix pull
✔ Contract: Orders API v1.3
✔ Writing: src/types/orders.ts — updated
✔ Writing: src/schemas/orders.ts — updated
Breaking changes in v1.3:
✗ totalAmount renamed to price
Run tsc to find all affected files.