output 함수로 마이그레이션하기

Angular는 v17.3에서 개선된 출력 API를 도입했으며, v19부터 프로덕션 환경에서 사용할 수 있는 안정적인 API로 간주합니다. 이 API는 input() API와 비슷하지만 시그널을 기반으로 하지 않습니다. 사용자 정의 이벤트를 위한 output 함수와 장점에 대한 자세한 내용은 전용 가이드를 참고하세요.

output 함수를 사용하려는 기존 프로젝트를 지원하기 위해 Angular 팀은 @Output 사용자 정의 이벤트를 새로운 output() API로 변환하는 자동 마이그레이션을 제공합니다.

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

ng generate @angular/core:output-migration

마이그레이션으로 무엇이 바뀌나요?

1. @Output() 클래스 멤버를 이에 대응하는 output()으로 업데이트합니다.
2. 컴포넌트나 디렉티브 파일의 TypeScript 모듈 수준 임포트도 업데이트합니다.
3. 사용이 권장되지 않는 event.next() 같은 API 호출을 event.emit()으로 변환하고 event.complete() 호출을 제거합니다.

이전

import {Component, Output, EventEmitter} from '@angular/core';

@Component({
  template: `<button (click)="someMethod('test')">emit</button>`,
})
export class MyComponent {
  @Output() someChange = new EventEmitter<string>();

  someMethod(value: string): void {
    this.someChange.emit(value);
  }
}

이후

import {Component, output} from '@angular/core';

@Component({
  template: `<button (click)="someMethod('test')">emit</button>`,
})
export class MyComponent {
  readonly someChange = output<string>();

  someMethod(value: string): void {
    this.someChange.emit(value);
  }
}

설정 옵션

이 마이그레이션은 요구 사항에 맞게 동작을 조정할 수 있는 몇 가지 옵션을 지원합니다.

--path 옵션

지정하지 않으면 마이그레이션이 경로를 묻고 Angular CLI 워크스페이스 전체를 업데이트합니다. 이 옵션으로 마이그레이션 범위를 특정 하위 디렉터리로 제한할 수 있습니다.

--analysis-dir 옵션

대규모 프로젝트에서는 이 옵션으로 분석할 파일 수를 줄일 수 있습니다. 기본적으로 마이그레이션은 @Output() 마이그레이션의 영향을 받는 모든 참조를 업데이트하기 위해 --path 옵션과 관계없이 워크스페이스 전체를 분석합니다.

이 옵션으로 분석 범위를 하위 폴더로 제한할 수 있습니다. 다만 이 디렉터리 바깥의 참조는 별도 알림 없이 건너뛰므로 빌드가 실패할 수 있습니다.

다음과 같이 옵션을 사용하세요.

ng generate @angular/core:output-migration --path src/app/sub-folder

예외

일부 경우에는 마이그레이션이 코드를 수정하지 않습니다. 예를 들어 테스트 파일 외부에서 이벤트의 pipe() 메서드를 사용하는 경우가 해당합니다. 다음 코드는 마이그레이션되지 않습니다.

export class MyDialogComponent {
  @Output() close = new EventEmitter<void>();
  doSome(): void {
    this.close.complete();
  }
  otherThing(): void {
    this.close.pipe();
  }
}

테스트 파일에서는 출력을 건너뛰는 대신 사용 코드를 다시 작성하므로 this.close.pipe(…)는 outputToObservable(this.close).pipe(…)로 바뀝니다.