programing

프로젝트를 Angular v5에서 Angular v6로 업그레이드하려고 합니다.

muds 2023. 5. 11. 21:57

프로젝트를 Angular v5에서 Angular v6로 업그레이드하려고 합니다.

Angular 6가 여기 있기 때문에, 저는 제 Angular 5 클라이언트 애플리케이션을 Angular 6로 업그레이드하거나 이동하고 싶지만, 저를 안내할 튜토리얼이나 어떤 것도 받지 못하고 있습니다.

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

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 앱에 대한 공식 각도 업데이트 Guide에서 수행됨):

업데이트하지 않은 경우 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
```
다음을 실행하여 Angular Material을 최신 버전으로 업데이트합니다.
```
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-compatible을 제거합니다.자세한 내용은 이 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+로 업데이트합니다(각 CLI 6 버전에 필요).
Angular cli 글로벌 패키지를 다음 버전으로 업데이트합니다.
```
npm uninstall -g @angular/cli
npm cache verify
```
5 npm 전이버 5 우사경용다니합을 합니다.npm cache clean
```
npm install -g @angular/cli@next
```

패키지의 각 패키지 버전을 변경합니다.에 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

참고:- "Angular Compiler에는 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 설치 -g @syslog/cli
npm 설치 @sys/cli
ng update @vmdk/cli --vmdk-only --from=1.7.0
ng 업데이트 @vmdk/core
npm 설치 rxjs-compat
서브

패키지에서 실행 스크립트를 업데이트해야 할 수 있습니다.jsonFor. 예를 들어 "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 https://github.com/angular/angular-cli/wiki/new 을 사용하여 새 프로젝트 생성
https://update.angular.io/ 을 사용하여 현재 버전의 Angular → Angular 6에서 변경된 내용을 확인합니다.변경/수정 방법을 제공합니다.
위의 단계를 따라 2단계에서 생성된 angular.json 파일을 복사/업데이트합니다.모든 종속성 및 donpm 업데이트를 가져오는 프로젝트의 donpmi
이제 큰 부분이 옵니다.RxJS 업그레이드 및 충돌 해결.RxJS는 이 릴리스에서 연산자 및 관찰 가능한 작성자의 가져오기를 표준화했습니다.donpm i -gxjs-tslint를 실행하고 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
  }
}

이제 보풀이 흐릅니다. 수정합니다.이렇게 하면 몇 가지 항목이 수정되지만 나머지 문제는 대부분 강조 표시되므로 수동으로 수정해야 합니다.

연산자 이름 변경:

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

모든 연산자가 rxjs/operator로 이동됨

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으로 업데이트하려면 아래 설명을 실행하십시오.

ng 업데이트 @vmdk/cli
ng 업데이트 @vmdk/core
npm 설치 rxjs-compat(이전 버전 rxjs 5.6을 지원하려면)
npm install -gxjs-tslint (코드에서 rxjs 5 형식에서 rxjs 6 형식으로 변경합니다.전체적으로 설치해야 작동함)
rxjs-5-6-migrate -psrc/tsconfig.app.json(설치 후 소스 코드에서 rxjs6 형식으로 변경해야 함)
npm 제거 rxjs-compat(마지막으로 제거)

전체 가이드

-------------------------------------------------------------------------------------------------------

전체 및 로컬로 CLI 업데이트

NPM 사용(노드 버전 8+가 있는지 확인)

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

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-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/ 를 참조하십시오.

-------------------------------------------------------------------------------------------------------

따라서 수동으로 업데이트해야 합니다.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

기존 프로젝트를 수정해야 하는 기존 프로젝트를 업데이트하려면 패키지를 변경해야 합니다.당신의 프로젝트 안에 있는 json.

Angular 자체에는 중단된 변경 사항이 없지만 RxJS에 있으므로 레거시 코드로 작업하기 위해 rxjs-compature 라이브러리를 사용하는 것을 잊지 마십시오.

  npm install --save rxjs-compat

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

다음 명령을 실행합니다.

ng update

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

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

내 환경:

Angular CLI 전역: 6.0.0, 로컬: 1.7.4, 각도: 5.2, 유형 스크립트 2.5.3

참고: 사용 가능ng Update먼저 Angular CLI 6.0을 설치해야 합니다.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

각도 재료 5.4.2, ngx-sys 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

관찰 가능을 사용하면 다음 오류가 발생합니다.

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/

이것이 당신에게 도움이 되기를 바랍니다 :)

먼저 사용해 보십시오.

ng update @angular/cli @angular/core

오류가 발생한 경우 이것을 시도합니다.

ng update @angular/cli @angular/core --allow-dirty

여기 참조

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

'programing' 카테고리의 다른 글

Angular 2에서 동적으로 CSS 업데이트 (0)	2023.05.11
Mongo DB - 독립 실행형 및 1노드 복제본 세트의 차이점 (0)	2023.05.11
Xcode 프로젝트를 위해 포드 파일에 여러 대상을 지정하려면 어떻게 해야 합니까? (0)	2023.05.11
Xcode를 완전히 제거하고 모든 설정을 지우는 방법 (0)	2023.05.11
마이크로소프트는 어디에 있습니까?ID 모델 dll (0)	2023.05.11

현재글프로젝트를 Angular v5에서 Angular v6로 업그레이드하려고 합니다.

각종 프로그래밍 정보를 다루는 블로그입니다.

WordPress, C, Powershell, ASP.NET, sql-server, Git, Ajax, jquery, JSON, Android, reactjs, angularjs, Spring-Boot, MySQL, bash, oracle, mongoDB, MariaDB, Python, Excel,

Today :
Yesterday :

muds

프로젝트를 Angular v5에서 Angular v6로 업그레이드하려고 합니다.

프로젝트를 Angular v5에서 Angular v6로 업그레이드하려고 합니다.

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

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

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

전체 가이드

-------------------------------------------------------------------------------------------------------

전체 및 로컬로 CLI 업데이트

2.업데이트 종속성

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

-------------------------------------------------------------------------------------------------------

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

프로젝트를 Angular v5에서 Angular v6로 업그레이드하려고 합니다.

프로젝트를 Angular v5에서 Angular v6로 업그레이드하려고 합니다.

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

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

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

전체 가이드

-------------------------------------------------------------------------------------------------------

전체 및 로컬로 CLI 업데이트

2.업데이트 종속성

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

-------------------------------------------------------------------------------------------------------

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바