`inject` 함수로 마이그레이션하기

Angular의 inject 함수는 생성자 기반 주입보다 더 정확한 타입과 표준 데코레이터와의 더 나은 호환성을 제공합니다.

이 스키매틱은 클래스의 생성자 기반 주입을 inject 함수를 사용하도록 변환합니다.

다음 명령어로 스키매틱을 실행하세요.

ng generate @angular/core:inject

import {Component, Inject, Optional} from '@angular/core';
import {MyService} from './service';
import {DI_TOKEN} from './token';

@Component({template: ''})
export class MyComp {
  constructor(
    private service: MyService,
    @Inject(DI_TOKEN) @Optional() readonly token: string,
  ) {}
}

이후

import {Component, inject} from '@angular/core';
import {MyService} from './service';
import {DI_TOKEN} from './token';

@Component({template: ''})
export class MyComp {
  private service = inject(MyService);
  readonly token = inject(DI_TOKEN, {optional: true});
}

마이그레이션 옵션

이 마이그레이션은 결과를 조정할 수 있는 여러 옵션을 제공합니다.

`path` 옵션

프로젝트에서 마이그레이션할 하위 경로를 지정합니다. 디렉터리 전체를 마이그레이션하려면 .을 전달하거나 비워 두세요.

`migrateAbstractClasses` 옵션

Angular는 추상 클래스의 매개변수를 주입할 수 있는지 검증하지 않습니다. 따라서 마이그레이션이 오류 발생 위험 없이 추상 클래스를 inject로 안정적으로 변환할 수 없으므로 기본적으로 비활성화되어 있습니다. 추상 클래스도 마이그레이션하려면 이 옵션을 활성화하세요. 다만 일부 오류는 직접 수정해야 할 수 있습니다.

`backwardsCompatibleConstructors` 옵션

기본적으로 마이그레이션은 생성자의 매개변수를 삭제하거나 코드가 없는 생성자 자체를 삭제하는 등 코드를 최대한 정리합니다. 경우에 따라 Angular 데코레이터가 있는 클래스가 다른 Angular 데코레이터가 있는 클래스를 상속하면 컴파일 오류가 발생할 수 있습니다. 이 옵션을 활성화하면 코드가 늘어나는 대신 추가 생성자 시그니처를 생성하여 하위 호환성을 유지합니다.

import {Component} from '@angular/core';
import {MyService} from './service';

@Component({template: ''})
export class MyComp {
  constructor(private service: MyService) {}
}

이후

import {Component, inject} from '@angular/core';
import {MyService} from './service';

@Component({template: ''})
export class MyComp {
  private service = inject(MyService);

  /** Inserted by Angular inject() migration for backwards compatibility */
  constructor(...args: unknown[]);

  constructor() {}
}

`nonNullableOptional` 옵션

@Optional 데코레이터가 있는 매개변수의 주입에 실패하면 Angular는 null을 반환합니다. 따라서 @Optional 매개변수의 실제 타입에는 | null이 포함됩니다. 하지만 데코레이터는 타입에 영향을 줄 수 없으므로 기존 코드에는 잘못된 타입이 많이 있습니다. inject()는 이 타입을 바로잡으므로 새로운 컴파일 오류가 발생할 수 있습니다. 이 옵션을 활성화하면 마이그레이션이 inject() 호출 뒤에 null이 아님을 명시하는 연산자를 추가하여 이전 타입과 일치시킵니다. 다만 이로 인해 타입 오류가 가려질 수 있습니다.

NOTE: 이미 null을 허용하는 타입의 매개변수에는 null이 아님을 명시하는 연산자를 추가하지 않습니다. 해당 매개변수를 사용하는 코드에서 이미 null 가능성을 고려했을 가능성이 높기 때문입니다.

import {Component, Inject, Optional} from '@angular/core';
import {TOKEN_ONE, TOKEN_TWO} from './token';

@Component({template: ''})
export class MyComp {
  constructor(
    @Inject(TOKEN_ONE) @Optional() private tokenOne: number,
    @Inject(TOKEN_TWO) @Optional() private tokenTwo: string | null,
  ) {}
}

이후

import {Component, inject} from '@angular/core';
import {TOKEN_ONE, TOKEN_TWO} from './token';

@Component({template: ''})
export class MyComp {
  // Note the `!` at the end.
  private tokenOne = inject(TOKEN_ONE, {optional: true})!;

  // Does not have `!` at the end, because the type was already nullable.
  private tokenTwo = inject(TOKEN_TWO, {optional: true});
}