Angular v6에서 Angular v7로 업그레이드

Angular 버전 7 이 공식 Angular 블로그 링크 로 출시되었습니다 . 자세한 내용은 공식 각도 업데이트 가이드 https://update.angular.io 를 참조하세요. 이 단계는 Angular Material을 사용하는 기본 Angular 6 앱에서 작동합니다.

ng update @angular/cli
ng update @angular/core
ng update @angular/material

Angular v5에서 Angular v6으로 업그레이드

Angular 버전 6 이 공식 Angular 블로그 링크 로 출시되었습니다 . 아래에서 일반적인 업그레이드 단계를 언급했지만 업데이트 전후에 코드를 변경하여 v6에서 작동하도록해야합니다. 자세한 정보는 공식 웹 사이트 https://update.angular.io를 방문 하세요 .

업그레이드 단계 (대부분 Angular Material을 사용하는 기본 Angular 앱에 대한 공식 Angular 업데이트 가이드 에서 가져옴) :

1. 업데이트하지 않는 경우 NodeJS 버전이 8.9 이상인지 확인하십시오.

2. Angular cli를 전역 및 로컬로 업데이트 하고 다음을 실행하여 이전 구성 .angular-cli.json 을 새 angular.json 형식으로 마이그레이션합니다 .

   npm install -g @angular/cli
   npm install @angular/cli
   ng update @angular/cli
   

3. 다음을 실행하여 모든 Angular 프레임 워크 패키지를 v6으로 업데이트하고 올바른 버전의 RxJS 및 TypeScript를 업데이트합니다.

   ng update @angular/core
   

4. 다음을 실행하여 Angular Material을 최신 버전으로 업데이트하십시오.

   ng update @angular/material
   

5. RxJS v6은 v5에서 주요 변경 사항이 있으며, v6은 애플리케이션 작동을 유지하는 하위 호환성 패키지 rxjs-compat를 제공하지만 rxjs-compat에 의존하지 않도록 TypeScript 코드를 리팩터링해야합니다. TypeScript 코드를 리팩터링하려면 다음을 실행하십시오.

   npm install -g rxjs-tslint
   rxjs-5-to-6-migrate -p src/tsconfig.app.json
   

   참고 : 모든 종속성이 RxJS 6으로 업데이트되면 번들 크기가 증가함에 따라 rxjs- compat를 제거하십시오. 자세한 내용은이 RxJS 업그레이드 가이드 를 참조하십시오.

   npm uninstall rxjs-compat
   

6. ng serve그것을 확인하기 위해 실행 했습니다.
   빌드 오류가 발생하면 https://update.angular.io 에서 자세한 정보를 참조하십시오 .

Angular v5에서 Angular 6.0.0-rc.5로 업그레이드

1. rxjs를 6.0.0- beta.0으로 업그레이드 하십시오. 자세한 내용은이 RxJS 업그레이드 가이드 를 참조하십시오. RxJS v6에는 주요 변경 사항이 있으므로 먼저 코드를 최신 RxJS 버전과 호환되도록 만드십시오.

2. NodeJS 버전을 8.9+로 업데이트합니다 (angular cli 6 버전에서 필요함).

3. Angular cli 글로벌 패키지를 다음 버전으로 업데이트하십시오.

   npm uninstall -g @angular/cli
   npm cache verify
   

   npm 버전이 5 미만이면 다음을 사용하십시오. npm cache clean

   npm install -g @angular/cli@next
   

4. package.json 파일의 각도 패키지 버전을 다음과 같이 변경하십시오. ^6.0.0-rc.5

   "dependencies": {
     "@angular/animations": "^6.0.0-rc.5",
     "@angular/cdk": "^6.0.0-rc.12",
     "@angular/common": "^6.0.0-rc.5",
     "@angular/compiler": "^6.0.0-rc.5",
     "@angular/core": "^6.0.0-rc.5",
     "@angular/forms": "^6.0.0-rc.5",
     "@angular/http": "^6.0.0-rc.5",
     "@angular/material": "^6.0.0-rc.12",
     "@angular/platform-browser": "^6.0.0-rc.5",
     "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
     "@angular/router": "^6.0.0-rc.5",
     "core-js": "^2.5.5",
     "karma-jasmine": "^1.1.1",
     "rxjs": "^6.0.0-uncanny-rc.7",
     "rxjs-compat": "^6.0.0-uncanny-rc.7",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.5.0",
     "@angular/cli": "^6.0.0-rc.5",
     "@angular/compiler-cli": "^6.0.0-rc.5",
     "@types/jasmine": "2.5.38",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.1.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "postcss-loader": "^2.1.4",
     "protractor": "~5.1.0",
     "ts-node": "~5.0.0",
     "tslint": "~5.9.1",
     "typescript": "^2.7.2"
   }
   

5. 다음으로 Angular cli 로컬 패키지를 다음 버전으로 업데이트하고 위에서 언급 한 패키지를 설치합니다.

   rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows
   Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
   npm install --save-dev @angular/cli@next
   npm install
   

6. Angular CLI 구성 형식이 angular cli 6.0.0-rc.2 버전에서 변경되었으며 다음 명령을 실행하여 기존 구성을 자동으로 업데이트 할 수 있습니다. 이전 구성 파일 .angular-cli.json 을 제거 하고 새 angular.json 파일 을 작성 합니다.

   ng update @angular/cli --migrate-only --from=1.7.4

참고 :- “Angular 컴파일러에 TypeScript> = 2.7.2 및 <2.8.0이 필요하지만 대신 2.8.3을 찾았습니다.”라는 오류가 표시되는 경우. 다음 명령을 실행하십시오.

npm install typescript@2.7.2

답변

{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}

do -> tap,
catch -> catchError,
switch -> switchAll,
finally -> finalize

import { map, filter, reduce } from 'rxjs/operators';

   import { Observable, Subject, of, from } from 'rxjs';

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

npm i -g rxjs-tslint

//or using yarn

yarn global add rxjs-tslint

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

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json