Angular 2에서 4로 마이그레이션하며 겪은 이슈들

배경

작년부터 진행 중인 사내 관리자 페이지가 Angular 2.4 기반이었다. 이번 달 초 Angular 4.0이 정식 릴리즈되면서 업그레이드를 진행했다.

참고로 Angular 3은 건너뛰고 4로 넘어갔는데, 내부 패키지 버전 불일치 문제 때문이라고 한다.

마이그레이션 과정

패키지 업데이트

npm install @angular/[email protected] @angular/[email protected] \
  @angular/[email protected] @angular/[email protected] \
  @angular/[email protected] @angular/[email protected] \
  @angular/[email protected] \
  @angular/[email protected] [email protected]

TypeScript도 2.1에서 2.2로 올렸다.

주요 변경사항

1. Animation 패키지 분리

기존에 @angular/core에 포함되어 있던 애니메이션 모듈이 별도 패키지로 분리되었다.

// Before
import { trigger, state } from '@angular/core';

// After
import { trigger, state } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

app.module.ts에서 BrowserAnimationsModule을 import 해줘야 한다.

2. ngIf의 else 구문 추가

이건 편리한 개선사항이었다.

<div *ngIf="isLoading; else loaded">
  로딩 중...
</div>
<ng-template #loaded>
  <div>컨텐츠</div>
</ng-template>

기존에는 *ngIf와 *ngIf="!condition"을 각각 써야 했다.

결과

빌드 후 번들 사이즈가 약 15% 정도 줄었다. Angular 팀이 View Engine 최적화를 많이 했다고 하는데 체감이 됐다.

실제 운영 환경 배포 후 특별한 이슈는 없었다. breaking change가 거의 없어서 마이그레이션 부담이 적었다.

참고

• TypeScript strictNullChecks 옵션을 켜는 것도 고려 중이다
• Angular CLI 1.0도 곧 나온다고 하니 적용해볼 예정