Stop Wasting Time on Backends – Mock like a Pro in Angular 21 with ngx-api-mimic 🚀 #showdev

#angular #typescript #webdev #nestjs

We’ve all been there: you’re building a recruitment task, a polished portfolio project, or a quick demo, and you spend 40% of your time setting up a mock Express server or hardcoding JSON files that don't persist anything.

When you move to production, you often have to rewrite half of your data-fetching logic. There’s a better way.

I’m excited to share ngx-api-mimic – a library designed for Angular 21 that brings the power and structure of NestJS directly into your frontend HTTP Interceptor.

What is ngx-api-mimic?

It’s a high-fidelity mocking engine that lives inside your Angular app. Instead of just returning static objects, it allows you to build a functional "in-browser backend" using familiar patterns like Controllers, Guards, and Pipes.

Why you’ll love it:

NestJS-inspired Architecture: If you know NestJS, you already know how to use this. Use @Controller(), @Get(), @Post(), and @Body() to define your API logic.
Type-Safe Data Mocking: Generate realistic data based on your TypeScript interfaces. Thanks to advanced schema support, your IDE provides full autocompletion, so you never guess your field names.
Automated Persistence: It comes with built-in LocalStorage support. If you "POST" a new user, they will actually be there after a page refresh. Perfect for CRUD demos!
Built for Angular 21: Fully compatible with the latest framework features, including the new signal-based reactivity and Vitest.
Seamless Migration: When the real backend is ready, just delete the interceptor. Your data services remain untouched because they were calling "real" HTTP endpoints all along.

🤖 The AI Edge: Built for the Agentic Era

We are living in the age of AI-assisted coding. Whether you use Cursor, GitHub Copilot, or specialized AI Agents, ngx-api-mimic is ready.

I’ve optimized the library’s documentation and internal metadata specifically for Large Language Models (LLMs) and AI search crawlers by adopting the llms.txt standard and integrating extensive JSON-LD structured data. This means:

AI Agents can "read" your mock API structure more accurately.
Generating new controllers via LLMs is seamless because the library follows predictable, standard patterns.
Your AI tools will understand how to help you build features faster because the library provides the right context out of the box.

Quick Look at the Code

@Controller('users')
@UsingSchema('users', UserInterface) // Intelligent data generation!
export class UserMockController {
  @Get()
  getUsers() {
    // Logic here...
  }

  @Get('/:id')
  getUser(@UrlParam('id') id: string) {
    // Return user by ID...
  }

  @Post()
  @UseGuards(AuthGuard) // Simulate real security logic
  createUser(@Body() data: UserDto) {
    // Automatically persists to LocalStorage!
  }
}

Perfect for:

✅ Recruitment Tasks: Show off your architectural skills by implementing a full API logic without an external server.
✅ Portfolio Apps: Host your app on GitHub Pages or Vercel with a fully working, stateful "backend".
✅ Rapid Prototyping: Build the frontend and define the API contract before the backend team even starts their first sprint.