program story

Angular v5에서 Angular v6으로 프로젝트를 업그레이드하고 싶습니다

inputbox 2020. 7. 24. 20:52

Angular v5에서 Angular v6으로 프로젝트를 업그레이드하고 싶습니다

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

나에 따르면 새 Angular CLI를 실행하고 이전 소스를 새 프로젝트로 이동해야합니다. Angular 6이 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 앱에 대한 공식 Angular 업데이트 가이드 에서 대부분 취함 ) :

업데이트하지 않으면 NodeJS 버전이 8.9 이상인지 확인하십시오.
Angular cli를 글로벌 및 로컬로 업데이트 하고 다음을 실행하여 이전 구성 .angular-cli.json 을 새 angular.json 형식으로 마이그레이션하십시오 .
```
npm install -g @angular/cli  
npm install @angular/cli  
ng update @angular/cli
```
다음을 실행하여 모든 Angular 프레임 워크 패키지를 v6으로 업데이트하고 올바른 버전의 RxJS 및 TypeScript를 업데이트하십시오.
```
ng update @angular/core
```
다음을 실행하여 각도 재질을 최신 버전으로 업데이트하십시오.
```
ng update @angular/material
```
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
```
ng serve그것을 확인하기 위해 실행 을 완료 했습니다.
빌드 오류가 발생하면 https://update.angular.io 에서 자세한 정보를 참조하십시오 .

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

rxjs를 6.0.0- beta.0으로 업그레이드 하십시오. 자세한 내용은이 RxJS 업그레이드 안내서 를 참조하십시오. RxJS v6의 주요 변경 사항은 먼저 최신 RxJS 버전과 호환되는 코드입니다.
NodeJS 버전을 8.9+로 업데이트하십시오 (angular cli 6 버전에 필요함)
Angular cli 글로벌 패키지를 다음 버전으로 업데이트하십시오.
```
npm uninstall -g @angular/cli
npm cache verify
```
npm 버전이 <5이면 npm cache clean
```
npm install -g @angular/cli@next
```

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

다음 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

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

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

참고 :-다음과 같은 오류가 발생하는 경우 "각도 컴파일러에는 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

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

npm install -g @ angular / cli
npm install @ angular / cli
ng update @ angular / cli --migrate-only --from = 1.7.0
ng 업데이트 @ 각도 / 코어
npm 설치 rxjs-compat
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 를 확인 하십시오. 기존 구성을 새 구성 파일로 이동해야합니다.
To do this create another dummy project with latest cli using ng new ‘your-project’ and same defaults such as prefix, style etc you used earlier for your project. Create new project with cli https://github.com/angular/angular-cli/wiki/new
Use https://update.angular.io/ to check what has been changed from your current version of Angular → Angular 6. It provides usage of how to change/fix them.
Follow the steps above and copy/update the angular.json file created in step2. Do npm i in your project to get all dependencies and do npm update
Now comes the big part. RxJS upgrade and resolving conflicts. RxJS has standardised imports of operators and Observable creators with this release. Do npm i -g rxjs-tslint and add below lint configuration in tslint.json

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

Now run ng lint --fix. This fixes few items but most of the remaining issues will be highlighted and you have to fix it manually.

Operators Name change:

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

All operators moved to rxjs/operators

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

Observable creation methods are moved to rxjs

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

You are all set. Welcome to Angular 6 :) Check my blog post here on how to upgrade

I had to re-run ng update @angular/cli for angular-cli.json to be changed to angular.json

Please run the below comments to update to Angular 6 from Angular 5

ng update @angular/cli
ng update @angular/core
npm install rxjs-compat (In order to support older version rxjs 5.6 )
npm install -g rxjs-tslint (To change from rxjs 5 to rxjs 6 format in code. Install globally then only will work)
rxjs-5-to-6-migrate -p src/tsconfig.app.json (After installing we have to change it in our source code to rxjs6 format)
npm uninstall rxjs-compat (Remove this finally)

Complete guide

-----------------With angular-cli--------------------------

1. Update CLI globally and locally

Using NPM ( make sure that you have node version 8+ )

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

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

2.Update dependencies

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

Angular 6 now depends on TypeScript 2.7 and RxJS 6

Normally that would mean that you have to update your code everywhere RxJS imports and operators are used, but thankfully there’s a package that takes care of most of the heavy lifting:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Then you can run rxjs-5-to-6-migrate

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

finally remove rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Refer to this link https://alligator.io/angular/angular-6/

-------------------Without angular-cli-------------------------

So you have to manually update your package.json file.

Then run

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

As Vinay Kumar pointed out that it will not update global installed Angular CLI. To update it globally just use following commands:

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

Note if you want to update existing project you have to modify existing project, you should change package.json inside your project.

There are no breaking changes in Angular itself but they are in RxJS, so don't forget to use rxjs-compat library to work with legacy code.

  npm install --save rxjs-compat

I wrote a good article about installation/updating Angular CLI http://bmnteam.com/angular-cli-installation/

simply run the following command:

ng update

note: this will not update globally.

This is how I make it work.

My Environment:

Angular CLI Global : 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 2.5.3

Note: To enable ng Update you need to install Angular CLI 6.0 first npm install -g @angular/cli or npm install @angular/cli

ng update //update Angular Package core/common/complier... to 6.0.0
ng update @angular/cli //change angular-cli.json to angular.json

optional if you have angular-material 5.4.2, ngx-translate 9.1.1, ng-bootstrap/ng-bootstrap 1.1.1:

ng update @angular/material //upgrade to 6.0.1
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

If you use Observable and get the error:

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'.

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

import { Observable, of } from "rxjs";

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

There are few steps to upgrade 2/4/5 to Angular 6.

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

To fix the issue related to "angular.json" :-

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

Store MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Hoping this will help you :)

참고URL : https://stackoverflow.com/questions/48970553/want-to-upgrade-project-from-angular-v5-to-angular-v6

'program story' 카테고리의 다른 글

su를 사용하여 나머지 bash 스크립트를 해당 사용자로 실행하려면 어떻게합니까? (0)	2020.07.24
두 개의 현을 인터리빙하는 가장 파이썬적인 방법 (0)	2020.07.24
기존 Xcode 프로젝트에서 Git 사용 (0)	2020.07.24
Linq에서 Enumerable.Zip 확장 방법은 무엇입니까? (0)	2020.07.24
브라우저에서 phonegap 열린 링크 (0)	2020.07.24

현재글Angular v5에서 Angular v6으로 프로젝트를 업그레이드하고 싶습니다

inputbox

Angular v5에서 Angular v6으로 프로젝트를 업그레이드하고 싶습니다

Angular v5에서 Angular v6으로 프로젝트를 업그레이드하고 싶습니다

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

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

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

Complete guide

-----------------With angular-cli--------------------------

1. Update CLI globally and locally

2.Update dependencies

Angular 6 now depends on TypeScript 2.7 and RxJS 6

-------------------Without angular-cli-------------------------

'program story' 카테고리의 다른 글

'program story'의 다른글

티스토리툴바

Angular v5에서 Angular v6으로 프로젝트를 업그레이드하고 싶습니다

Angular v5에서 Angular v6으로 프로젝트를 업그레이드하고 싶습니다

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

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

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

Complete guide

-----------------With angular-cli--------------------------

1. Update CLI globally and locally

2.Update dependencies

Angular 6 now depends on TypeScript 2.7 and RxJS 6

-------------------Without angular-cli-------------------------

'program story' 카테고리의 다른 글

'program story'의 다른글

관련글

티스토리툴바