wshobson/angular-migration

angular-migration은(는) 무엇을 하나요?

AngularJS에서 Angular로 하이브리드 모드, 점진적 컴포넌트 재작성, 의존성 주입 업데이트를 통해 마이그레이션합니다. AngularJS 애플리케이션 업그레이드, 프레임워크 마이그레이션 계획, 레거시 Angular 코드 현대화 시 사용하세요.

개요

이 스킬은 AngularJS(1.x) 애플리케이션을 Angular(2+)로 안전하게 전환하는 방법을 제공합니다. 하이브리드 모드를 사용하여 두 프레임워크를 동시에 실행하고, 점진적으로 모든 컴포넌트를 변환합니다.

주요 기능

• 하이브리드 모드 설정: AngularJS와 Angular를 동시에 실행하는 UpgradeModule 구성
• 점진적 컴포넌트 재작성: 각 컴포넌트를 개별적으로 Angular로 변환
• 의존성 주입 업데이트: AngularJS 서비스를 Angular의 DI 시스템으로 마이그레이션
• 라우팅 통합: @angular/router와 AngularJS 라우터의 공존
• 테스트 지원: 변환 과정 중 테스트 전략 제공

사용법

1. 하이브리드 부트스트랩: AppModule에서 UpgradeModule을 사용하여 AngularJS 앱을 부트스트랩합니다.

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { UpgradeModule } from '@angular/upgrade/static';
   
   @NgModule({
     imports: [
       BrowserModule,
       UpgradeModule
     ],
     bootstrap: []
   })
   export class AppModule {
     constructor(private upgrade: UpgradeModule) {}
     ngDoBootstrap() {
       this.upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
     }
   }
   

2. 컴포넌트 변환: AngularJS 디렉티브를 Angular 컴포넌트로 재작성합니다.

   • $scope 대신 @Input()과 @Output() 사용
   • $http 대신 HttpClientModule 사용

3. 서비스 마이그레이션: AngularJS 서비스를 Angular @Injectable() 서비스로 변환합니다.

   • AngularJS에서 Angular로 서비스 제공: $provide.factory 또는 downgradeInjectable

4. 라우팅 통합: @angular/router를 사용하여 AngularJS 라우트를 점진적으로 전환합니다.

   • AngularJS $routeProvider와 Angular 라우터를 하이브리드로 운영

참고 사항

• 마이그레이션 중에는 두 프레임워크의 변경 감지 시스템이 모두 활성화되므로 성능에 주의하세요.
• strictDi: true를 사용하여 의존성 주입의 안전성을 높이세요.
• 단위 테스트와 E2E 테스트를 통해 각 단계에서 기능을 검증하세요.

관련 리소스

• Angular 공식 마이그레이션 가이드
• UpgradeModule 문서

---

이 스킬은 wshobson/angular-migration 저장소에서 관리됩니다.