Angular Module Setup

Angular Module Setup — DI + Routing

inject() Function

All DI uses inject() function. Never constructor injection.

private readonly http = inject(HttpClient);
private readonly destroyRef = inject(DestroyRef);
private readonly repository = inject(ENTITY_REPOSITORY);
private readonly dialogControl = inject(DialogControl, { optional: true });

InjectionToken for Repository Ports

Domain layer defines the port + token:

import { InjectionToken } from '@angular/core';

export interface EntityRepository {
  find(params: FilterParams): Promise>>;
  create(params: CreateParams): Promise>;
  update(params: UpdateParams): Promise>;
  delete(id: EntityId): Promise>;
}

export const ENTITY_REPOSITORY = new InjectionToken('EntityRepository');

Route-Level Providers

Providers registered at route level, NOT component or root:

export const entityRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('./pages/entity-page.component').then(m => m.EntityPageComponent),
    providers: [...EntityInfrastructureProviders],
  },
];

Infrastructure Providers Array

export const EntityInfrastructureProviders: Provider[] = [
  // Queries (Application Layer)
  GetEntitiesQuery,
  // Use Cases (Application Layer)
  CreateEntityUseCase, UpdateEntityUseCase, DeleteEntityUseCase,
  // API Clients (Infrastructure Layer)
  EntityApiClient,
  // Repository Implementations (Adapters)
  { provide: ENTITY_REPOSITORY, useClass: EntityRepositoryImpl },
];

Order: Queries → UseCases → API Clients → Repository implementations

Lazy Loading

// Single component
{ path: 'entities', loadComponent: () => import('@app/entity').then(m => m.EntityPageComponent) }

// Child routes with shared providers
{ path: 'entities', loadChildren: () => import('@app/entity').then(m => m.entityRoutes) }

Route Params as Signal Inputs

// app.config.ts
provideRouter(routes, withComponentInputBinding());

// component
entityId = input(); // auto-bound from :entityId route param

Functional Guards

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isAuthenticated() || inject(Router).createUrlTree(['/login']);
};

DestroyRef — Always Inject Explicitly

private readonly destroyRef = inject(DestroyRef);

// In ngOnInit — MUST pass destroyRef
stream$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();

State Services — Component-Level Providers

@Component({
  providers: [EntityListStateService],
})
export class EntityPageComponent {
  readonly state = inject(EntityListStateService);
}

For detailed patterns, see [references/di-patterns.md](references/di-patterns.md).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: cuongtl1992
• Source: cuongtl1992/vibe-skills
• License: MIT

Install and usage instructions live in the source repository linked above.