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

2018. 5. 19. 18:16

진행이 느리다보니 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로 작업해보도록 하겠습니다.

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

'IT Tech > Angular' 카테고리의 다른 글

Angular State Management (NGXS)  (0) 2018.09.15
Npm 거슬리는 pacakge-lock.json?  (2) 2018.09.02
Angular Service 만들기  (2) 2018.05.13
Angular Domain Model  (0) 2018.04.24
Angular 테스트(Test) 하기  (0) 2018.04.11

TechTrip IT Tech/Angular