9 - Dependency Injection Avanzata in Angular

// PRIMA: Iniezione via costruttore (approccio tradizionale)
@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
  ) {}
}

// DOPO: Funzione inject() (approccio moderno)
@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 });

  // I campi sono già disponibili, non serve il costruttore
  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);
}

// Uso nel componente
@Component({ ... })
export class ProductDetailComponent {
  params = injectRouteParams();
  // params() restituisce { id: '123', slug: 'my-product' }
}
    

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

// Token con valore statico
export const API_BASE_URL = new InjectionToken<string>(
  'API_BASE_URL'
);

// Token con 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 per configurazione complessa
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
      }
    })
  }
);

// Uso nei componenti
@Component({ ... })
export class AppComponent {
  private config = inject(APP_CONFIG);
  private isMobile = inject(IS_MOBILE);
}
    

// Un servizio che gestisce lo stato locale
@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();
}

// Ogni istanza del componente riceve il proprio FormStateService
@Component({
  selector: 'app-editable-card',
  standalone: true,
  providers: [FormStateService], // Istanza LOCALE
  template: `
    <div class="card" [class.dirty]="formState.isDirty()">
      <ng-content />
    </div>
  `
})
export class EditableCardComponent {
  protected formState = inject(FormStateService);
}
    

// Singleton globale - l'approccio più comune
@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentUser = signal<User | null>(null);
  isAuthenticated = computed(() => this.currentUser() !== null);
}

// Condiviso tra app Angular sulla stessa pagina
@Injectable({ providedIn: 'platform' })
export class SharedThemeService {
  theme = signal<'light' | 'dark'>('dark');
}

// Un'istanza per ogni modulo lazy-loaded
@Injectable({ providedIn: 'any' })
export class FeatureAnalyticsService {
  private events: AnalyticsEvent[] = [];
  // Ogni feature lazy ha il proprio tracker indipendente
}

// Istanza per componente (non tree-shakable)
@Injectable() // Nessun providedIn
export class DialogStateService {
  isOpen = signal(false);
  data = signal<any>(null);
}

// Va registrato nell'array providers del componente:
@Component({
  providers: [DialogStateService]
})
export class MyDialogComponent {
  state = inject(DialogStateService);
}
    

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

// Token multi-provider per validatori custom
export const FORM_VALIDATORS = new InjectionToken<FormValidator[]>(
  'FORM_VALIDATORS'
);

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

// Registrazione di più provider con multi: true
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FORM_VALIDATORS,
      useValue: {
        name: 'required',
        validate: (v: any) => v ? null : 'Campo obbligatorio'
      },
      multi: true
    },
    {
      provide: FORM_VALIDATORS,
      useValue: {
        name: 'minLength',
        validate: (v: string) =>
          v?.length >= 3 ? null : 'Minimo 3 caratteri'
      },
      multi: true
    },
    {
      provide: FORM_VALIDATORS,
      useFactory: () => {
        const http = inject(HttpClient);
        return {
          name: 'uniqueEmail',
          validate: async (v: string) => {
            // Validazione asincrona via API
            return null;
          }
        };
      },
      multi: true
    }
  ]
};

// Consumo nel servizio
@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: il servizio si auto-registra
// Se nessun componente/servizio lo importa, viene eliminato dal bundle
@Injectable({ providedIn: 'root' })
export class AnalyticsService {
  track(event: string) {
    // Se AnalyticsService non e importato da nessuna parte,
    // tutto questo codice viene rimosso dal bundle
    console.log('Track:', event);
  }
}

// TREE-SHAKABLE con factory: dipendenze calcolate
export const FEATURE_FLAGS = new InjectionToken<FeatureFlags>(
  'FEATURE_FLAGS',
  {
    providedIn: 'root',
    factory: () => {
      const http = inject(HttpClient);
      // La factory viene eliminata se FEATURE_FLAGS
      // non viene mai iniettato
      return { darkMode: true, newDashboard: false };
    }
  }
);

// NON TREE-SHAKABLE: registrato nell'array providers
// Sempre incluso nel bundle, anche se non usato
export const appConfig: ApplicationConfig = {
  providers: [
    LegacyService,  // Sempre nel bundle!
    { provide: LoggerService, useClass: ConsoleLoggerService }
  ]
};
    

// PRIMA: Guard come classe (deprecato)
@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']);
  }
}

// DOPO: Guard come funzione
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 con parametri: 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']);
  };
}

// Configurazione delle rotte
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';

// Interceptor per autenticazione
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);
};

// Interceptor per logging
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`);
      }
    })
  );
};

// Interceptor per retry con 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;
      }
    })
  );
};

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

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

// Servizio per creare componenti con un contesto DI personalizzato
@Injectable({ providedIn: 'root' })
export class DynamicComponentService {
  private parentInjector = inject(EnvironmentInjector);

  createIsolatedComponent<T>(
    component: Type<T>,
    vcr: ViewContainerRef,
    providers: StaticProvider[] = []
  ) {
    // Crea un nuovo EnvironmentInjector con provider aggiuntivi
    const childInjector = createEnvironmentInjector(
      [
        { provide: DIALOG_DATA, useValue: { title: 'My Dialog' } },
        ...providers
      ],
      this.parentInjector
    );

    // Crea il componente nel nuovo contesto
    const componentRef = createComponent(component, {
      environmentInjector: childInjector,
      hostElement: document.createElement('div')
    });

    // Inserisci nella view
    vcr.insert(componentRef.hostView);

    // Importante: distruggi l'injector quando il componente viene distrutto
    componentRef.onDestroy(() => childInjector.destroy());

    return componentRef;
  }
}

// Uso in un componente host
@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';

// Funzione utility che richiede 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);

  // Cleanup automatico quando il contesto viene distrutto
  destroyRef.onDestroy(() => clearInterval(intervalId));
}

// Uso nel componente: funziona nel costruttore (contesto attivo)
@Component({ ... })
export class EditorComponent {
  constructor() {
    createAutoSaveEffect('editor-form');
  }
}

// Uso al di fuori del costruttore: runInInjectionContext
@Component({ ... })
export class DashboardComponent {
  private envInjector = inject(EnvironmentInjector);

  onTabSelected(tabId: string) {
    // Questo metodo viene chiamato da un click handler,
    // quindi inject() non funzionerebbe direttamente
    runInInjectionContext(this.envInjector, () => {
      createAutoSaveEffect(tabId);
    });
  }
}

// Pattern avanzato: creare un "service locator" basato su funzioni
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 dell'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'
      );
    });
  });
});

// Test di un componente standalone con override
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');
  });
});

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

    const injector = TestBed.inject(EnvironmentInjector);

    // Esegui il guard nel contesto di injection
    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);
  });
});