Angular Has a Free API You Should Know About

Angular 19 introduced experimental server routing and server-side features that turn Angular into a full-stack framework.

Angular SSR API Routes

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr'

export const serverRoutes: ServerRoute[] = [
  { path: 'api/health', renderMode: RenderMode.Server },
  { path: 'api/users/**', renderMode: RenderMode.Server },
  { path: '**', renderMode: RenderMode.Prerender }
]

HttpClient — The Built-in API Client

Angular's HttpClient is one of the most powerful API clients in any framework:

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient)

  getUsers() {
    return this.http.get<User[]>('/api/users').pipe(
      retry({ count: 3, delay: 1000 }),
      catchError(this.handleError)
    )
  }

  createUser(user: CreateUserDto) {
    return this.http.post<User>('/api/users', user)
  }

  searchUsers(query: string) {
    return this.http.get<User[]>('/api/users', {
      params: { q: query },
      headers: { 'X-Request-ID': crypto.randomUUID() }
    })
  }
}

HTTP Interceptors

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const auth = inject(AuthService)
  const token = auth.getToken()

  if (token) {
    req = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`)
    })
  }
  return next(req).pipe(
    catchError(err => {
      if (err.status === 401) auth.logout()
      return throwError(() => err)
    })
  )
}

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor]))
  ]
}

Signals + Resource API

@Component({
  template: `
    @if (users.isLoading()) { <spinner /> }
    @for (user of users.value(); track user.id) {
      <user-card [user]="user" />
    }
  `
})
export class UsersComponent {
  search = signal('')
  users = resource({
    request: this.search,
    loader: ({ request: query }) =>
      fetch(`/api/users?q=${query}`).then(r => r.json())
  })
}

Real-World Use Case

An enterprise team had Angular frontend + separate NestJS backend. With Angular 19 SSR routes and server functions, they consolidated: API routes in the same project, shared TypeScript types, one CI pipeline. Deployment complexity dropped by half.

Angular has quietly become a full-stack contender.

---

Build Smarter Data Pipelines

Need to scrape websites, extract APIs, or automate data collection? Check out my ready-to-use scrapers on Apify — no coding required.

Custom scraping solution? Email me at [e-mail] — fast turnaround, fair prices.