inject() & @Service()

import { Service, computed, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Service() // v22: equivalent to @Injectable({ providedIn: 'root' })
export class CartService {
  private readonly http = inject(HttpClient); // ✓ @Service requires inject() — no DI in the constructor

  private readonly _items = signal<CartItem[]>([]);
  readonly items = this._items.asReadonly();
  readonly total = computed(() => this._items().reduce((s, i) => s + i.price * i.qty, 0));

  add(item: CartItem) {
    this._items.update((list) => [...list, item]);
  }
}

// 1. Default: a singleton in root, created on first injection, tree-shakable
@Service()
export class Analytics {}

// 2. No auto-provide: it must be put explicitly in `providers` (an instance per component / route)
@Service({ autoProvided: false })
export class WizardState {}

@Component({ providers: [WizardState] /* ... */ })
export class CheckoutWizard {}

// 3. With a factory: you control how it is created (configuration, choosing the implementation)
@Service({ factory: () => new ApiClient(inject(API_URL)) })
export class ApiClient {
  constructor(readonly baseUrl: string) {} // called by your factory, not by DI
}

// Pattern: an abstract class = contract + default implementation (v22 allows a factory on abstract classes)
@Service({ factory: () => new ConsoleNotifier() })
export abstract class Notifier {
  abstract notify(message: string): void;
}

class ConsoleNotifier extends Notifier {
  notify(message: string) { console.info(message); }
}

@Injectable() // subclasses used with useClass need their own decorator
class ToastNotifier extends Notifier {
  private readonly toasts = inject(ToastService);
  notify(message: string) { this.toasts.show(message); }
}

// Anywhere: inject(Notifier) → ConsoleNotifier
// In one area of the application (or in tests) you change the implementation:
@Component({ providers: [{ provide: Notifier, useClass: ToastNotifier }] })
export class AdminShell {}

// ✗ Error NG2028: a @Service class cannot use constructor dependency injection.
@Service()
export class Orders {
  constructor(private http: HttpClient) {}
}

// ✓
@Service()
export class Orders {
  private readonly http = inject(HttpClient);
}

// Why inject() instead of the constructor?

// 1. Inheritance without super(...) with all the dependencies
export abstract class BasePage {
  protected readonly route = inject(ActivatedRoute);
  protected readonly title = inject(Title);
}
export class UsersPage extends BasePage {
  private readonly users = inject(UsersApi); // no constructor(route, title, users) { super(route, title) }
}

// 2. It works in functions (guards, resolvers, interceptors, factories)
export const authGuard: CanActivateFn = () => inject(AuthStore).isLoggedIn();

// 3. Reusable functions that inject (“composables”)
export function injectQueryParam(name: string) {
  const route = inject(ActivatedRoute);
  return toSignal(route.queryParamMap.pipe(map((p) => p.get(name))), { initialValue: null });
}
readonly search = injectQueryParam('q');

// inject() works ONLY in an injection context:
//  ✓ the constructor, field initialisation
//  ✓ provider factories (useFactory, InjectionToken factory)
//  ✓ guards, resolvers, interceptors, route functions
//  ✓ runInInjectionContext(injector, () => ...)
//  ✗ ngOnInit, a click handler, setTimeout, subscribe → error NG0203

export class Report {
  private readonly injector = inject(Injector);

  exportLater() {
    setTimeout(() => {
      runInInjectionContext(this.injector, () => {
        const exporter = inject(PdfExporter); // ok
        exporter.run();
      });
    });
  }
}