The Complete Production SOP: How to Deploy and Run Angular Standalone Components & Modern Bootstrap in Autonomous AI Agents

---
description: Angular Standalone Components & Modern Bootstrap Rules
globs: **/*.ts
---
# Modern Angular SOP
- ALWAYS author components with standalone: true (or omit if Angular 19 default).
- Direct dependencies MUST be declared in the component `imports` array.
- NEVER generate NgModule, CommonModule (unless necessary), or class-based route guards.
- Bootstrap using `bootstrapApplication(RootComponent, { providers: [...] })` in `main.ts`.
- Configure routing via `provideRouter(routes, withComponentInputBinding())`.
- Provide HTTP via `provideHttpClient(withInterceptors([...]))`.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes, withComponentInputBinding(), withViewTransitions()),
    provideHttpClient(withFetch())
  ]
};

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }

  return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } });
};

import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import { AsyncPipe } from '@angular/common';
import { UserService } from '../../core/user.service';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [RouterLink, RouterOutlet, AsyncPipe],
  templateUrl: './dashboard.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent {
  protected readonly userService = inject(UserService);
  protected readonly user$ = this.userService.currentUser$;
}