Understanding and Using the inject() Function in Angular

// ⚠️ Classic constructor DI
constructor(
  private http: HttpClient,
  private authService: AuthService,
  private router: Router,
  private toast: ToastService
) {}

// player.service.ts (Legacy)
@Injectable({ providedIn: 'root' })
export class PlayerService {
  constructor(
    private http: HttpClient,
    private logger: LoggerService
  ) {}
 
  getPlayers() {
    this.logger.log('Fetching players...');
    return this.http.get<Player[]>('/api/players');
  }
}

// player.service.ts (Modern)
import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoggerService } from './logger.service';
 
@Injectable({ providedIn: 'root' })
export class PlayerService {
  private http = inject(HttpClient);
  private logger = inject(LoggerService);
 
  getPlayers() {
    this.logger.log('Fetching players...');
    return this.http.get<Player[]>('/api/players');
  }
}

// ⚠️ Fragile Base Class with Constructor DI
export abstract class BaseHttpService {
  constructor(
    protected http: HttpClient,
    protected analytics: AnalyticsService
  ) {}
}
 
export class UserService extends BaseHttpService {
  constructor(http: HttpClient, analytics: AnalyticsService) {
    super(http, analytics); // 😫 Boilerplate passing
  }
}

// ✅ Clean Base Class with inject()
export abstract class BaseHttpService {
  protected http = inject(HttpClient);
  protected analytics = inject(AnalyticsService);
}
 
export class UserService extends BaseHttpService {
  // Zero constructor boilerplate required!
}

// auth.guard.ts (Functional Guard)
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';
 
export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
 
  return authService.isAuthenticated() ? true : router.createUrlTree(['/login']);
};

// use-window-size.ts
import { inject, signal, NgZone } from '@angular/core';
import { DOCUMENT } from '@angular/common';
 
export function useWindowDimensions() {
  const document = inject(DOCUMENT);
  const window = document.defaultView;
  const width = signal(window ? window.innerWidth : 0);
 
  if (window) {
    window.addEventListener('resize', () => width.set(window.innerWidth));
  }
 
  return { width: width.asReadonly() };
}

export class UserComponent implements OnInit {
  ngOnInit() {
    // ❌ ERROR NG0203! Injection context is already closed here.
    const http = inject(HttpClient);
  }
}

import { Component, EnvironmentInjector, inject, runInInjectionContext } from '@angular/core';
 
@Component({ ... })
export class DynamicComponent {
  private injector = inject(EnvironmentInjector);
 
  executeAsyncAction() {
    setTimeout(() => {
      runInInjectionContext(this.injector, () => {
        const auth = inject(AuthService); // ✅ Valid inside runInInjectionContext
        auth.checkSession();
      });
    }, 1000);
  }
}