9 - Advanced Dependency Injection in Angular

// BEFORE: Constructor injection (traditional approach)
@Component({
  selector: 'app-user-list',
  standalone: true,
  template: '...'
})
export class UserListComponent {
  constructor(
    private userService: UserService,
    private router: Router,
    private route: ActivatedRoute,
    @Inject(API_URL) private apiUrl: string,
    @Optional() private logger?: LoggerService
  ) {}
}

// AFTER: inject() function (modern approach)
@Component({
  selector: 'app-user-list',
  standalone: true,
  template: '...'
})
export class UserListComponent {
  private userService = inject(UserService);
  private router = inject(Router);
  private route = inject(ActivatedRoute);
  private apiUrl = inject(API_URL);
  private logger = inject(LoggerService, { optional: true });

  // Fields are already available, no constructor needed
  users = this.userService.getUsers();
}
    

// utils/navigation.ts
export function injectRouteParams() {
  const route = inject(ActivatedRoute);
  return toSignal(
    route.paramMap.pipe(
      map(params => ({
        id: params.get('id'),
        slug: params.get('slug')
      }))
    )
  );
}

export function injectQueryParams() {
  const route = inject(ActivatedRoute);
  return toSignal(route.queryParamMap);
}

// Usage in component
@Component({ ... })
export class ProductDetailComponent {
  params = injectRouteParams();
  // params() returns { id: '123', slug: 'my-product' }
}
    

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

// Token with static value
export const API_BASE_URL = new InjectionToken<string>(
  'API_BASE_URL'
);

// Token with factory function (tree-shakable!)
export const IS_MOBILE = new InjectionToken<boolean>(
  'IS_MOBILE',
  {
    providedIn: 'root',
    factory: () => {
      const platform = inject(PLATFORM_ID);
      if (isPlatformBrowser(platform)) {
        return window.innerWidth < 768;
      }
      return false;
    }
  }
);

// Token for complex configuration
export interface AppConfig {
  apiUrl: string;
  production: boolean;
  features: {
    darkMode: boolean;
    analytics: boolean;
  };
}

export const APP_CONFIG = new InjectionToken<AppConfig>(
  'APP_CONFIG',
  {
    providedIn: 'root',
    factory: () => ({
      apiUrl: 'https://api.example.com',
      production: false,
      features: {
        darkMode: true,
        analytics: true
      }
    })
  }
);

// Usage in components
@Component({ ... })
export class AppComponent {
  private config = inject(APP_CONFIG);
  private isMobile = inject(IS_MOBILE);
}
    

// A service that manages local state
@Injectable()
export class FormStateService {
  private fields = signal<Map<string, any>>(new Map());
  private dirty = signal(false);

  setValue(key: string, value: any) {
    this.fields.update(m => {
      const newMap = new Map(m);
      newMap.set(key, value);
      return newMap;
    });
    this.dirty.set(true);
  }

  isDirty = this.dirty.asReadonly();
}

// Each component instance gets its own FormStateService
@Component({
  selector: 'app-editable-card',
  standalone: true,
  providers: [FormStateService], // LOCAL instance
  template: `
    <div class="card" [class.dirty]="formState.isDirty()">
      <ng-content />
    </div>
  `
})
export class EditableCardComponent {
  protected formState = inject(FormStateService);
}
    

// Global singleton - the most common approach
@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentUser = signal<User | null>(null);
  isAuthenticated = computed(() => this.currentUser() !== null);
}

// Shared across Angular apps on the same page
@Injectable({ providedIn: 'platform' })
export class SharedThemeService {
  theme = signal<'light' | 'dark'>('dark');
}

// One instance per lazy-loaded module
@Injectable({ providedIn: 'any' })
export class FeatureAnalyticsService {
  private events: AnalyticsEvent[] = [];
  // Each lazy feature gets its own independent tracker
}

// Instance per component (not tree-shakable)
@Injectable() // No providedIn
export class DialogStateService {
  isOpen = signal(false);
  data = signal<any>(null);
}

// Must be registered in the component providers array:
@Component({
  providers: [DialogStateService]
})
export class MyDialogComponent {
  state = inject(DialogStateService);
}
    

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

// Multi-provider token for custom validators
export const FORM_VALIDATORS = new InjectionToken<FormValidator[]>(
  'FORM_VALIDATORS'
);

export interface FormValidator {
  name: string;
  validate(value: any): string | null;
}

// Registering multiple providers with multi: true
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FORM_VALIDATORS,
      useValue: {
        name: 'required',
        validate: (v: any) => v ? null : 'Field is required'
      },
      multi: true
    },
    {
      provide: FORM_VALIDATORS,
      useValue: {
        name: 'minLength',
        validate: (v: string) =>
          v?.length >= 3 ? null : 'Minimum 3 characters'
      },
      multi: true
    },
    {
      provide: FORM_VALIDATORS,
      useFactory: () => {
        const http = inject(HttpClient);
        return {
          name: 'uniqueEmail',
          validate: async (v: string) => {
            // Async validation via API
            return null;
          }
        };
      },
      multi: true
    }
  ]
};

// Consuming in a service
@Injectable({ providedIn: 'root' })
export class ValidationService {
  private validators = inject(FORM_VALIDATORS);

  validateAll(value: any): string[] {
    return this.validators
      .map(v => v.validate(value))
      .filter((err): err is string => err !== null);
  }
}
    

// TREE-SHAKABLE: the service self-registers
// If no component/service imports it, it is removed from the bundle
@Injectable({ providedIn: 'root' })
export class AnalyticsService {
  track(event: string) {
    // If AnalyticsService is not imported anywhere,
    // all this code is removed from the bundle
    console.log('Track:', event);
  }
}

// TREE-SHAKABLE with factory: computed dependencies
export const FEATURE_FLAGS = new InjectionToken<FeatureFlags>(
  'FEATURE_FLAGS',
  {
    providedIn: 'root',
    factory: () => {
      const http = inject(HttpClient);
      // The factory is removed if FEATURE_FLAGS
      // is never injected
      return { darkMode: true, newDashboard: false };
    }
  }
);

// NOT TREE-SHAKABLE: registered in the providers array
// Always included in the bundle, even if unused
export const appConfig: ApplicationConfig = {
  providers: [
    LegacyService,  // Always in the bundle!
    { provide: LoggerService, useClass: ConsoleLoggerService }
  ]
};
    

// BEFORE: Guard as class (deprecated)
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | UrlTree {
    if (this.auth.isAuthenticated()) {
      return true;
    }
    return this.router.createUrlTree(['/login']);
  }
}

// AFTER: Guard as function
export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService);
  const router = inject(Router);

  if (auth.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url }
  });
};

// Guard with parameters: factory function
export function roleGuard(requiredRole: string): CanActivateFn {
  return (route, state) => {
    const auth = inject(AuthService);
    const router = inject(Router);

    if (auth.hasRole(requiredRole)) {
      return true;
    }
    return router.createUrlTree(['/forbidden']);
  };
}

// Route configuration
export const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard],
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(m => m.DashboardComponent)
  },
  {
    path: 'admin',
    canActivate: [authGuard, roleGuard('admin')],
    loadComponent: () => import('./admin/admin.component')
      .then(m => m.AdminComponent)
  }
];
    

import { HttpInterceptorFn } from '@angular/common/http';

// Authentication interceptor
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const auth = inject(AuthService);
  const token = auth.getToken();

  if (token) {
    const cloned = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });
    return next(cloned);
  }
  return next(req);
};

// Logging interceptor
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  const startTime = Date.now();
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        const duration = Date.now() - startTime;
        console.log(`${req.method} ${req.url} - ${duration}ms`);
      }
    })
  );
};

// Retry interceptor with backoff
export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry({
      count: 3,
      delay: (error, retryCount) => {
        if (error.status === 429 || error.status >= 500) {
          return timer(Math.pow(2, retryCount) * 1000);
        }
        throw error;
      }
    })
  );
};

// Registration in app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([
        authInterceptor,
        loggingInterceptor,
        retryInterceptor
      ])
    )
  ]
};
    

import {
  Component,
  EnvironmentInjector,
  createEnvironmentInjector,
  createComponent,
  ViewContainerRef,
  inject
} from '@angular/core';

// Service for creating components with a custom DI context
@Injectable({ providedIn: 'root' })
export class DynamicComponentService {
  private parentInjector = inject(EnvironmentInjector);

  createIsolatedComponent<T>(
    component: Type<T>,
    vcr: ViewContainerRef,
    providers: StaticProvider[] = []
  ) {
    // Create a new EnvironmentInjector with additional providers
    const childInjector = createEnvironmentInjector(
      [
        { provide: DIALOG_DATA, useValue: { title: 'My Dialog' } },
        ...providers
      ],
      this.parentInjector
    );

    // Create the component in the new context
    const componentRef = createComponent(component, {
      environmentInjector: childInjector,
      hostElement: document.createElement('div')
    });

    // Insert into the view
    vcr.insert(componentRef.hostView);

    // Important: destroy the injector when the component is destroyed
    componentRef.onDestroy(() => childInjector.destroy());

    return componentRef;
  }
}

// Usage in a host component
@Component({
  selector: 'app-dialog-host',
  standalone: true,
  template: `<ng-container #outlet />`
})
export class DialogHostComponent {
  private dynamicService = inject(DynamicComponentService);
  private vcr = inject(ViewContainerRef);

  openDialog(dialogComponent: Type<any>, data: any) {
    this.dynamicService.createIsolatedComponent(
      dialogComponent,
      this.vcr,
      [{ provide: DIALOG_DATA, useValue: data }]
    );
  }
}
    

import {
  runInInjectionContext,
  EnvironmentInjector,
  inject,
  DestroyRef
} from '@angular/core';

// Utility function that requires inject()
function createAutoSaveEffect(formId: string) {
  const http = inject(HttpClient);
  const destroyRef = inject(DestroyRef);

  const intervalId = setInterval(() => {
    const formData = getFormData(formId);
    http.post('/api/autosave', formData).subscribe();
  }, 30000);

  // Automatic cleanup when the context is destroyed
  destroyRef.onDestroy(() => clearInterval(intervalId));
}

// Usage in component: works in constructor (active context)
@Component({ ... })
export class EditorComponent {
  constructor() {
    createAutoSaveEffect('editor-form');
  }
}

// Usage outside constructor: runInInjectionContext
@Component({ ... })
export class DashboardComponent {
  private envInjector = inject(EnvironmentInjector);

  onTabSelected(tabId: string) {
    // This method is called from a click handler,
    // so inject() would not work directly
    runInInjectionContext(this.envInjector, () => {
      createAutoSaveEffect(tabId);
    });
  }
}

// Advanced pattern: create a function-based "service locator"
export function createServiceAccessor<T>(token: ProviderToken<T>) {
  let cachedInstance: T | undefined;
  return {
    init: () => {
      cachedInstance = inject(token);
    },
    get: () => {
      if (!cachedInstance) {
        throw new Error('Service not initialized. Call init() first.');
      }
      return cachedInstance;
    }
  };
}
    

import { TestBed } from '@angular/core/testing';

describe('UserService', () => {
  let service: UserService;
  let httpMock: jest.Mocked<HttpClient>;

  beforeEach(() => {
    // Mock the HttpClient
    const mockHttp = {
      get: jest.fn(),
      post: jest.fn()
    };

    TestBed.configureTestingModule({
      providers: [
        UserService,
        { provide: HttpClient, useValue: mockHttp },
        { provide: API_BASE_URL, useValue: 'http://test-api.com' }
      ]
    });

    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpClient) as jest.Mocked<HttpClient>;
  });

  it('should fetch users from the API', () => {
    const mockUsers = [{ id: 1, name: 'Alice' }];
    httpMock.get.mockReturnValue(of(mockUsers));

    service.getUsers().subscribe(users => {
      expect(users).toEqual(mockUsers);
      expect(httpMock.get).toHaveBeenCalledWith(
        'http://test-api.com/users'
      );
    });
  });
});

// Testing a standalone component with overrides
describe('DashboardComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [DashboardComponent],
    })
    .overrideComponent(DashboardComponent, {
      set: {
        providers: [
          {
            provide: AnalyticsService,
            useValue: { track: jest.fn() }
          }
        ]
      }
    })
    .compileComponents();
  });

  it('should track page view on init', () => {
    const fixture = TestBed.createComponent(DashboardComponent);
    const analytics = fixture.debugElement.injector.get(AnalyticsService);

    fixture.detectChanges();

    expect(analytics.track).toHaveBeenCalledWith('dashboard_view');
  });
});

// Testing functional guards
describe('authGuard', () => {
  it('should redirect to login when not authenticated', () => {
    TestBed.configureTestingModule({
      providers: [
        {
          provide: AuthService,
          useValue: { isAuthenticated: () => false }
        },
        provideRouter([])
      ]
    });

    const injector = TestBed.inject(EnvironmentInjector);

    // Run the guard in the injection context
    const result = runInInjectionContext(injector, () =>
      authGuard(
        {} as ActivatedRouteSnapshot,
        { url: '/dashboard' } as RouterStateSnapshot
      )
    );

    expect(result).toBeInstanceOf(UrlTree);
  });

  it('should allow access when authenticated', () => {
    TestBed.configureTestingModule({
      providers: [
        {
          provide: AuthService,
          useValue: { isAuthenticated: () => true }
        },
        provideRouter([])
      ]
    });

    const injector = TestBed.inject(EnvironmentInjector);

    const result = runInInjectionContext(injector, () =>
      authGuard(
        {} as ActivatedRouteSnapshot,
        { url: '/dashboard' } as RouterStateSnapshot
      )
    );

    expect(result).toBe(true);
  });
});