Angular 10 업그레이드는 여전히 어렵습니다.

오늘 아침 저는 고립된 방식으로 문제를 해결하기 위해 새로운 프로젝트의 프로토타입을 만들어야 했습니다.

Angular 8이 마지막 버전인 폴더로 전환했습니다. 그래서 문제가 없다고 생각해서 10으로 업데이트하겠습니다.

절대적인 어리석음이 즉시 나타납니다

업데이트하려면 their recommendations here을 따라야 합니다. 나는 과거로부터 우리가 10에 도달할 때까지 각 릴리스를 업그레이드하는 그들의 규칙을 따르는 것을 배웠습니다.

먼저 최신 버전 8로 이동

ng 업데이트 @angular/core@8 @angular/cli@8

릴리스가 최신이 아님을 감지하고 임시 버전을 다운로드하며 커밋되지 않은 변경 사항을 감지한 후 종료됩니다. 내 잘못이지만 총 시간 낭비입니다.

좋습니다. 파일을 커밋하고 다시 시도하십시오.

이제 버전 9로 이동

ng 업데이트 @angular/core@9 @angular/cli@9 . 다시 한 번 임시 버전이 먼저 설치됩니다. 다음은 다음과 같습니다.

[error] Error: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that 
those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies 
and instead address these warnings later.
    at _validateUpdatePackages 
(...\AppData\Local\Temp\
node_modules\angular\cli\node_modules\
schematics\update\update\ 
index.js:153:15)at 

..AppData\Local\Temp\
node_modules\ @angular\cli\ 
node_modules\schematics\update\update 
\index.js:691:13

위의 오류는 버전 8.latest에서 Angular 코어 및 cli를 남겼습니다.

@angular/cdk                      8.2.3
@angular/cli                      8.3.29

강제 버전 9 업데이트

Angular Schematics와 같이 수정될 것이라고 이미 알고 있는 피어 종속성이 실패했기 때문에 이러한 오류를 무시할 때입니다.

ng 업데이트 @angular/core@9 @angular/cli@9 --force

이로 인해 물론 전체 임시 재설치가 발생합니다. Angular를 버전 9로 가져오는 작업입니다.

마이그레이션이 정상적으로 실행됩니다.

프로젝트가 Angular 버전 9로 업데이트되었습니다!

우리를 어디?

지침에 따라 'npm outdated'를 실행하여 진행 상황을 확인합니다.

PS D:\Source\jpeters\MatTableBug> npm outdated
Package                             Current    Wanted    Latest  Location     
@angular-devkit/build-angular      0.901.12  0.901.12  0.1002.0  mat-table-bug
@angular/animations                  9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/cdk                          8.2.3     8.2.3    10.2.5  mat-table-bug
@angular/cli                         9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/common                      9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/compiler                    9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/compiler-cli                9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/core                        9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/forms                       9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/language-service            9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/material                     8.2.3     8.2.3    10.2.5  mat-table-bug
@angular/platform-browser            9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/platform-browser-dynamic    9.1.12    9.1.12    10.2.0  mat-table-bug
@angular/router                      9.1.12    9.1.12    10.2.0  mat-table-bug
@types/jasmine                       3.3.16    3.3.16     3.6.0  mat-table-bug
@types/node                         12.19.2   12.19.2   14.14.5  mat-table-bug
codelyzer                             5.2.2     5.2.2     6.0.1  mat-table-bug
jasmine-core                          3.4.0     3.4.0     3.6.0  mat-table-bug
jasmine-spec-reporter                 4.2.1     4.2.1     6.0.0  mat-table-bug
karma                                 4.1.0     4.1.0     5.2.3  mat-table-bug
karma-chrome-launcher                 2.2.0     2.2.0     3.1.0  mat-table-bug
karma-coverage-istanbul-reporter      2.0.6     2.0.6     3.0.3  mat-table-bug
karma-jasmine                         2.0.1     2.0.1     4.0.1  mat-table-bug
protractor                            5.4.4     5.4.4     7.0.0  mat-table-bug
ts-node                               7.0.1     7.0.1     9.0.0  mat-table-bug
tslib                                1.14.1    1.14.1     2.0.3  mat-table-bug
tslint                               5.15.0    5.15.0     6.1.3  mat-table-bug
typescript                            3.8.3     3.8.3     4.0.5  mat-table-bug
zone.js                              0.10.3    0.10.3    0.11.2  mat-table-bug

ng-version shows

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              9.1.12
@angular-devkit/schematics        9.1.12
@angular/cdk                      8.2.3
@angular/material                 8.2.3
@ngtools/webpack                  9.1.12
@schematics/angular               9.1.12
@schematics/update                0.901.12
rxjs                              6.6.3
typescript                        3.8.3
webpack                           4.42.0

Angular CDK 및 Material이 여전히 8인 것을 알 수 있습니까? 업데이트가 cdk를 건너뛰고 재료 패키지가 저 밖에 있는 이유. 그들은 Pete를 위해 @Angular에 있습니다.

업데이트

새 임시 버전을 다시 설치합니다. 우리는 네 번째 임시 버전 설치 중입니다.

이 업데이트는 진행 상황을 확인하기 위한 것이며 CDK 및 자료를 업데이트해야 한다고 알려줍니다.

버전 10으로

지침에 따라 이제 10에 도달하려고 합니다.

ng 업데이트 @angular/core @angular/cli

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.0
@angular-devkit/build-angular   0.1002.0
@angular-devkit/core            10.2.0
@angular-devkit/schematics      10.2.0
@angular/cdk                    8.2.3
@angular/material               8.2.3
@schematics/angular             10.2.0
@schematics/update              0.1002.0
rxjs                            6.6.3
typescript                      4.0.5

Angular가 다른 것을 권장하지 않는 곳이지만 아직은 아닙니다. CDK와 재료가 아직 없는 것을 볼 수 있습니다.

CDK 및 자료 업데이트

ng 업데이트를 다시 실행합니다.

업데이트

이번에는 Material 및 CDK 패키지에 대해서만 업데이트를 권장합니다.

   We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       8.2.3 -> 10.2.5          ng update @angular/cdk
      @angular/material                  8.2.3 -> 10.2.5          ng update @angular/material

좋은 소식은 그것이 우리에게 무엇을 해야 하는지를 알려주었다는 것입니다...

실행 후 :

ng update @angular/cdk @angular/material

버전 10이 설치되어 있는지 확인

Package                         Version
--------------------------------------------------------------
@angular-devkit/architect       0.1002.0
@angular-devkit/build-angular   0.1002.0
@angular-devkit/core            10.2.0
@angular-devkit/schematics      10.2.0
@angular/cdk                    10.2.5
@angular/material               10.2.5
@schematics/angular             10.2.0
@schematics/update              0.1002.0
rxjs                            6.6.3
typescript                      4.0.5

예!

유효성 검사 및 커밋

빌드

"신속"변경 사항이 남게 되기 전에 모든 변경 사항을 커밋합니다.

구축 및 저장되었습니다. 배송하세요!

Karma, Jasmine, 유형 등

Angular가 자체 도구의 종속성으로 이들을 포함하는 방법이 재미있지만 마이그레이션이 이를 업데이트하지 않는 것으로 보입니다.

Package                Current   Wanted   Latest  Location
@types/jasmine          3.3.16   3.3.16    3.6.0  mat-table-bug
@types/node            12.19.2  12.19.2  14.14.5  mat-table-bug
codelyzer                5.2.2    5.2.2    6.0.1  mat-table-bug
jasmine-core             3.5.0    3.5.0    3.6.0  mat-table-bug
jasmine-spec-reporter    5.0.2    5.0.2    6.0.0  mat-table-bug
karma                    5.0.9    5.0.9    5.2.3  mat-table-bug
ts-node                  7.0.1    7.0.1    9.0.0  mat-table-bug
zone.js                 0.10.3   0.10.3   0.11.2  mat-table-bug

일부 개선 사항

npm 감사

 === audit security report ===                        

found 0 vulnerabilities

많은 프로젝트에서 업데이트를 여러 번 실행했습니다. 매번 새로운 도전이며 참호에서 실제로 무슨 일이 일어나고 있는지 누가 압니까?

패키지.json?

 "dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/cdk": "~10.2.5",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/forms": "~10.2.0",
    "@angular/material": "^10.2.5",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular/cli": "~10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@angular/language-service": "~10.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.5"
  }

전반적인 등급
이것은 "D"또는 "D-"입니다. 하나의 명령만 있어야 합니다.

ng 마이그레이션[8,10], 실제로 현재 버전

을 감지해야 합니다.

마이그레이션 10