Angular 업데이트(Update from 5 to 6)

진행이 느리다보니 Angular가 버젼업이 되었네요.

Angular는 버젼 업이 꽤 빠른 편입니다.

2017년 11월 5 버젼이 나왔는데, 다음해 5월 다시 6 버젼이 나오네요.

불행인지 다행인지 진행한 내용이 많지 않아서 쉽게 업데이트가 됩니다.

오늘은 Angular 버젼업에 대해 공유해보겠습니다.

Angular에서 Version 업데이트를 위한 별도의 사이트도 있네요.

버젼과 복잡도, 방법을 입력하면 상세한 가이드를 볼 수 있습니다.

https://update.angular.io/

아래 나오는 스텝을 (조금 추가해서) 따라하면 됩니다. 

명령어 실행 시 관리자 권한이 필요합니다.

0-1. 구버젼 의존성 확인

@angular/upgrade 패키지

downgradeComponent 

downgradeInjectable

UpgradeComponent

UpgradeModule

위 모듈들을 @angular/upgrade/static 으로 변경

(저는 위 모듈들을 사용하지 않았었죠.)

HttpModule, Http 서비스

HttpClientModule, HttpClient 서비스로 변경

(이 역시도 사용하기 직전이었습니다.)

0-2. Node version 확인 (8 이상)

node --version

1. Angular CLI 업데이트 및 설정 파일 업데이트: 약 3분

npm install -g @angular/cli

npm install @angular/cli

npm install

npm update

ng update @angular/cli

2. Angular Framework package 업데이트: 약 20초

ng update @angular/core

3. Angular Material 업데이트: 약 20초

ng update @angular/material

4. Angular 이외 다른 의존 패키지 업데이트: 약 10초

이 부분은 App에 사용한 패키지에 따라 다르겠죠.

npm prune

npm update

5. RxJS 업데이트: 약 15초

npm install -g rxjs-tslint

rxjs-5-to-6-migrate -p src/tsconfig.app.json

npm uninstall -g rxjs-tslint

저는 rxjs-tslint를 다시 사용하지 않을 것 같아 지웠습니다.

위의 과정을 거치고 6.0 버젼으로 업그레이드가 완료되었습니다.

그런데..

ng serve 가 동작하지 않습니다.

아래와 같은 에러메시지와 함께요.

Cannot find module 'webpack/lib/RequestShortener'

아무래도 webpack이 설치 되어야할 것 같죠?

npm install --save-dev webpack

이제 앞으로는 Angular 6로 작업해보도록 하겠습니다.

(기본 기능에는 큰 차이가 없을 것 같습니다.)