# Angular Module Setup

> Angular module setup with inject() function, InjectionToken for repository ports, route-level providers for DI scoping, lazy loading with loadComponent/loadChildren, infrastructure providers array, and functional guards. Use when configuring DI, creating tokens, wiring providers, setting up routes, or understanding injection scope.

- **Type:** Skill
- **Install:** `agentstack add skill-cuongtl1992-vibe-skills-angular-module-setup`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [cuongtl1992](https://agentstack.voostack.com/s/cuongtl1992)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [cuongtl1992](https://github.com/cuongtl1992)
- **Source:** https://github.com/cuongtl1992/vibe-skills/tree/main/skills/frontend/angular-module-setup

## Install

```sh
agentstack add skill-cuongtl1992-vibe-skills-angular-module-setup
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Angular Module Setup — DI + Routing

## inject() Function

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

```typescript
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:

```typescript
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:

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

## Infrastructure Providers Array

```typescript
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

```typescript
// 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

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

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

## Functional Guards

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

## DestroyRef — Always Inject Explicitly

```typescript
private readonly destroyRef = inject(DestroyRef);

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

## State Services — Component-Level Providers

```typescript
@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](https://github.com/cuongtl1992)
- **Source:** [cuongtl1992/vibe-skills](https://github.com/cuongtl1992/vibe-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cuongtl1992-vibe-skills-angular-module-setup
- Seller: https://agentstack.voostack.com/s/cuongtl1992
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.