Angular 6이 여기에 있으므로 angular 5 클라이언트 응용 프로그램을 angular 6으로 업그레이드하거나 이동하고 싶지만 튜토리얼이나 지침을 제공 할 수있는 것은 없습니다.

나에 따르면 새 Angular CLI를 실행 한 다음 이전 소스를 새 프로젝트로 이동해야합니다. Angular 6이 Ivy라는 새로운 렌더러를 사용하고 있다는 것을 읽었습니다. Ivy에 따라 프로젝트를 변경해야합니까?

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

Angular 6이 방금 출시되었습니다.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

내 소규모 프로젝트 중 하나에서 효과가 있었던 것은 다음과 같습니다.

1. npm install -g @ angular / cli
2. npm 설치 @ angular / cli
3. ng update @ angular / cli --migrate-only --from = 1.7.0
4. @ angular / core 업데이트
5. npm 설치 rxjs-compat
6. ng 서브

예를 들어 package.json에서 실행 스크립트를 업데이트해야 할 수 있습니다. "app"및 "environment"와 같은 플래그를 사용하는 경우 이들은 각각 "project"및 "configuration"으로 업데이트되었습니다.

자세한 가이드는 https://update.angular.io/ 를 참조 하세요 .

특정 요구 사항에 대해 수행해야하는 작업을 알려주는 공식 업그레이드 가이드를 사용하십시오.

https://update.angular.io/

Angular 5에서 Angular 6으로의 단계별 업그레이드 세부 정보를 확인하십시오. 여기에서는 업그레이드 중에 발생하는 문제와 해결 방법에 대한 세부 정보를 제공합니다.

• 노드 버전을 8 이상으로 업데이트하고 npm i -g @ angular / cli @ latest에 의해 전 세계적으로 최신 Angular cli를 설치하십시오.
• Angular 6은 .anguar-cli.json 대신 angular.json을 구성 파일로 사용합니다. 또한 tslint가 변경되었습니다. 최신 구성 세부 정보는 https://github.com/angular/angular-cli/wiki/angular-workspace 를 확인 하십시오. 기존 구성을 새 구성 파일로 이동해야합니다.
• 이를 위해 새로운 'your-project'와 이전에 프로젝트에 사용한 접두사, 스타일 등과 같은 동일한 기본값을 사용하여 최신 cli로 다른 더미 프로젝트를 만듭니다. cli https://github.com/angular/angular-cli/wiki/new로 새 프로젝트 만들기
• https://update.angular.io/ 를 사용 하여 현재 버전의 Angular → Angular 6에서 변경된 사항을 확인합니다. 변경 / 수정 방법에 대한 사용법을 제공합니다.
• 위의 단계를 따르고 2 단계에서 만든 angular.json 파일을 복사 / 업데이트합니다. 프로젝트에서 npm i를 수행하여 모든 종속성을 얻고 npm 업데이트를 수행하십시오.
• 이제 큰 부분이 있습니다. RxJS 업그레이드 및 충돌 해결. RxJS는 이번 릴리스에서 연산자 및 Observable 생성자의 가져 오기를 표준화했습니다. npm i -g rxjs-tslint를 수행하고 tslint.json에서 아래 lint 구성을 추가하십시오.

{
  "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
  }
}

• 이제 ng lint --fix를 실행하십시오. 이렇게하면 몇 가지 항목이 수정되지만 나머지 문제의 대부분은 강조 표시되며 수동으로 수정해야합니다.

운영자 이름 변경 :

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

모든 연산자는 rxjs / operators로 이동했습니다.

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

관찰 가능한 생성 방법이 rxjs로 이동되었습니다.

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

당신 준비 다 됐어요. Angular 6에 오신 것을 환영합니다. :) 업그레이드 방법에 대한 내 블로그 게시물을 확인하십시오.

angular-cli.json을 angular.json으로 변경하려면 @ angular / cli 업데이트 를 다시 실행 해야했습니다.

Angular 5에서 Angular 6으로 업데이트하려면 아래 주석을 실행하십시오.

1. @ angular / cli 업데이트
2. @ angular / core 업데이트
3. npm install rxjs-compat (이전 버전 rxjs 5.6을 지원하기 위해)
4. npm install -g rxjs-tslint (코드에서 rxjs 5에서 rxjs 6 형식으로 변경하려면 전역으로 설치 한 후에 만 ​​작동 함)
5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (설치 후 소스 코드에서 rxjs6 형식으로 변경해야 함)
6. npm uninstall rxjs-compat (마지막으로 제거)

완전한 가이드

----------------- angular-cli 사용 --------------------------

1. 전역 및 로컬에서 CLI 업데이트

1. NPM 사용 (노드 버전 8 이상이 있는지 확인)

   npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

2. 원사 사용

   yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. 종속성 업데이트

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

Angular 6은 이제 TypeScript 2.7 및 RxJS 6에 의존합니다.

일반적으로 RxJS 가져 오기 및 연산자가 사용되는 모든 곳에서 코드를 업데이트해야하지만 고맙게도 대부분의 무거운 작업을 처리하는 패키지가 있습니다.

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

그런 다음 rxjs-5-to-6-migrate를 실행할 수 있습니다.

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

마지막으로 rxjs-compat 제거

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

이 링크 https://alligator.io/angular/angular-6/을 참조하십시오.

------------------- angular-cli없이 -------------------------

따라서 package.json파일 을 수동으로 업데이트해야 합니다.

그런 다음 실행

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

Vinay Kumar가 글로벌 설치된 Angular CLI를 업데이트하지 않을 것이라고 지적했듯이. 전역 적으로 업데이트하려면 다음 명령을 사용하십시오.

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

기존 프로젝트를 업데이트하려면 기존 프로젝트를 수정해야 하며 프로젝트 내에서 package.json 을 변경해야 합니다.

Angular 자체에는 주요 변경 사항이 없지만 RxJS에 있으므로 rxjs-compat 라이브러리를 사용하여 레거시 코드로 작업하는 것을 잊지 마십시오.

  npm install --save rxjs-compat  

Angular CLI http://bmnteam.com/angular-cli-installation/ 설치 / 업데이트에 대한 좋은 기사를 썼습니다.

다음 명령을 실행하기 만하면됩니다.

ng update

참고 : 이것은 전체적으로 업데이트되지 않습니다.

이것이 내가 작동하는 방법입니다.

내 환경 :

Angular CLI 글로벌 : 6.0.0, 로컬 : 1.7.4, Angular : 5.2, Typescript 2.5.3

참고 : 활성화하려면 ng Update먼저 Angular CLI 6.0을 설치해야합니다. npm install -g @angular/cli or npm install @angular/cli

1. ng update //update Angular Package core/common/complier... to 6.0.0

2. ng update @angular/cli //change angular-cli.json to angular.json

angular-material 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1이있는 경우 선택 사항 :

3. ng update @angular/material //upgrade to 6.0.1

4. npm install @ngx-translate/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //for ng-bootstrap

Observable을 사용하고 오류가 발생하는 경우 :

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

변화: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

에

import { Observable, of } from "rxjs";

Angular CLI 문제 : https://github.com/angular/angular-cli/issues/10621

2/4/5를 Angular 6으로 업그레이드하는 몇 가지 단계가 있습니다.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

"angular.json"관련 문제를 해결하려면 :-

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

스토어 마이그레이션
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS 마이그레이션
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

이것이 당신을 도울 것입니다 :)