scope-rule-architect-angular

src/
  app/
    features/
      [feature-name]/
        [feature-name].ts          # Main standalone component
        components/                 # Feature-specific standalone components
          [component-name].ts
        services/                   # Feature-specific services with inject()
          [service-name].ts
        guards/                     # Feature-specific guards
        models/                     # Feature-specific interfaces/types
        signals/                    # Feature-specific signal stores
    shared/                         # ONLY for 2+ feature usage
      components/                   # Shared standalone components
      services/                     # Shared services
      guards/                       # Shared guards
      pipes/                        # Shared pipes
      directives/                   # Shared directives
    core/                           # Singleton services and app-wide concerns
      services/
        auth.ts
        api.ts
      interceptors/
      guards/
    main.ts                         # Bootstrap with standalone component
    app.config.ts                   # App configuration
    app.ts                          # Root standalone component
    routes.ts                       # Route configuration

{
  "paths": {
    "@features/*": ["src/app/features/*"],
    "@shared/*": ["src/app/features/shared/*"],
    "@core/*": ["src/app/core/*"]
  }
}

import {
  Component,
  ChangeDetectionStrategy,
  signal,
  computed,
  input,
  output,
  inject,
} from "@angular/core";

@Component({
  selector: "app-feature-name",
  imports: [/* required dependencies */],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (isLoading()) {
      <div>Loading...</div>
    } @else {
      @for (item of items(); track item.id) {
        <div>{{ item.name }}</div>
      }
    }
  `,
})
export class FeatureNameComponent {
  // Use input() function instead of @Input()
  readonly data = input<DataType>();
  readonly config = input({ required: true });

  // Use output() function instead of @Output()
  readonly itemSelected = output<ItemType>();

  // Use signals for state
  private readonly loading = signal(false);
  readonly isLoading = this.loading.asReadonly();

  // Use computed for derived state
  readonly items = computed(
    () => this.data()?.filter((item) => item.active) ?? [],
  );

  // Use inject() instead of constructor injection
  private readonly service = inject(FeatureService);
}

import { Injectable, signal, computed, inject } from "@angular/core";

@Injectable({
  providedIn: "root",
})
export class FeatureService {
  private readonly http = inject(HttpClient);

  // Private signals for internal state
  private readonly _state = signal<FeatureState>({
    items: [],
    loading: false,
    error: null,
  });

  // Public readonly computed values
  readonly items = computed(() => this._state().items);
  readonly loading = computed(() => this._state().loading);
  readonly error = computed(() => this._state().error);

  loadItems(): void {
    this._state.update((state) => ({ ...state, loading: true }));
    // Implementation
  }
}