실세계 각도 상춘등 업그레이드 (v9 다음 버전)

Jared Youtsey | ng conf | 2019년 10월
최근에 article을 발표했는데 8판에서 상춘등의 호환성 선택에 대한 미리보기 버전과 업그레이드를 시도할 때 겪은 문제에 관한 내용이다.다음은 Angular v9을 사용하여 현재 업그레이드 경로의 다음 내용을 표시합니다.0.0 - 다음.6 pre beta 버전은 패키지 크기와 성능에 대한 최적화, v8 미리 보기 버전에 나타나지 않은 오류 복구를 포함한다.
상춘등은 아직 생산을 준비하지 않았다는 것을 일깨워 주었다.이것은 여전히 호환성 선택으로 미리 보기를 추가합니다.위험을 스스로 부담하다.너의 이정은 다를 수 있다.
나는 많은 제3자 의존 관계와 Angular 프레임워크의 광범위한 범위를 이용한 대형 상업 응용 프로그램을 업그레이드할 것이다.
첫 번째 단계는 업그레이드입니다.

ng update @angular/cli@next @angular/core@next

처음 시도할 때, 나는 각도가 9보다 작은 버전을 지정하는 의존항을 만났다.

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.

이 문제를 해결하기 위해 --force 플래그를 사용할 수 있습니다.

ng update @angular/cli@next @angular/core@next --force

이것은 컴파일하는 것 같지만, 출력을 스크롤할 때, 나는 다음과 같은 것을 보았다.

This migration uses the Angular compiler internally and therefore 
projects that no longer build successfully after the update cannot 
run the migration. Please ensure there are no AOT compilation 
errors and rerun the migration.. The following project failed: 
src/tsconfig.app.json

            Error: error TS100: Couldn't resolve resource 
../../assets/scss/common/component.common from 
/.../src/app/common/app-header.component.scss
Migration can be rerun with: "ng update @angular/core --from 8.0.0 
--to 9.0.0 --migrate-only"
            Successfully migrated all found undecorated classes
            that use dependency injection.

이것은 본문을 쓴 이래로 이미 복원된 오류다.만약 당신이 이것에 대해 궁금하다면 계속 읽어 주십시오.없으면 다음 섹션으로 건너뛰십시오.
문제는 SCSS @import의 주장입니다.

@import '../../assets/scss/common/component.common';

새 컴파일러는 훨씬 엄격해야 한다.실제 파일 이름이 필요합니다.파일의 시작 부분에 밑줄이 있는 경우 밑줄도 포함되지 않을 수 있습니다.내 모든 SCSS 가져오기에서 나는 반드시 정확한 파일 이름을 명시적으로 사용해야 한다. 이 예는 component.common.scss이다.나는 이 명령이 이 지점까지 계속 실행될 때까지 가져오는 것을 복구하기 위해 이 명령을 반복해서 실행해야만 했다.
현재, 내가 계속하기 전에, 나는 나의 package.json의 모든 논리 기능을 업그레이드하여, 나의 모든 의존항이 최신이라는 것을 확보할 것이다.Version Lens라는 Visual Studio 코드 확장을 사용하여 package.json을 관리합니다.

버전 렌즈는 지정한 현재 버전과 npm에서 제공한 최신 버전으로 package.json의 모든 항목을 설명합니다.

최신 링크를 클릭하여 package.json을 이 버전으로 업데이트합니다.나는 거의 모든 내용을 최신 버전으로 업데이트했다. @types/node을 제외하고는. 왜냐하면 나는 그것이 나의 노드 버전과 일치하기를 바란다.typescript를 3.5 이상으로 업그레이드하지 마십시오.x, 만약 당신이 이렇게 한다면, 신비로운 '유형 오류 중의 오류: 정의되지 않은' 오류 속성 '종류' 를 읽을 수 없습니다.Angular는 TypeScript 3.6도 지원하지 않습니다.

npm install

지금까지 모든 것이 순조롭다.

ng serve

읊다, 읊조리다

ERROR in The ngcc compiler has changed since the last ngcc build.
Please completely remove the "node_modules" folder containing "/Users/jyoutsey/src/MyMedstudy/ng/node_modules/hammerjs" and try again.

이 자체는 결코 잘못이 아니다.제3자 npm 모듈은 상춘등과 호환되지 않았습니다.따라서 우리는 A)에서 ivy-ngcc을 node_modules으로 컴파일하여 호환성을 얻거나 B)에서 node_modules을 삭제하고 다른 npm 설치를 한 다음에 ng build을 실행합니다. ng build과 ng serve이 모두 구축 목표를 실행하기 때문에 이 목표는 ivy-ngcc을 실행합니다.나는 B를 더 좋아한다. 이유는 간단하다. 나는 가끔 node_modules을 삭제하는 것이 좋은 일이라고 생각한다.만약 네가 한 가지 일을 하고 싶다면 안심해라.상춘등에서 지점과 상춘등 지점 사이를 왔다 갔다 전환하지 않으려면 B를 실행해야 합니다.

delete node_modules
npm install
ng serve

여기서 우리는 매우 상세한 오류 소식을 이해하기 시작했다.

ERROR in app/common/global-loading-indicator.component.ts:12:3 - error TS2554: Expected 2 arguments, but got 1.
12  @ViewChild('inner') inner;
     ~~~~~~~~~~~~~~~~~~
../node_modules/@angular/core/core.d.ts:7929:47
    7929     (selector: Type<any> | Function | string, opts: {
                                                       ~~~~~~~
    7930         read?: any;
         ~~~~~~~~~~~~~~~~~~~
    7931         static: boolean;
         ~~~~~~~~~~~~~~~~~~~~~~~~
    7932     }): any;
         ~~~~~
    An argument for 'opts' was not provided.

현재 이 프로그램은 Angular 버전 8에 있습니다.그것은 이러한 착오가 없이 끊임없이 구축되고 있다.우리가 처음에 버전 7에서 버전 8로 업그레이드되었을 때, 우리는 정적 로고를 업데이트해야 하지만, 전제는 정적:true이다.현재,opts는 필수입니다.static:false를 기입해야 합니다.7에서 8로 이동하는 시간에 따라, 당신은 이렇게 할 필요가 없을 수도 있습니다. 왜냐하면, 어느 때는true와false가 모두 강제적이기 때문입니다.
이러한 문제의 해결 방법은 상당히 간단하지만, 하나하나 해결하고 두 번째 파라미터를 제공해야 합니다.

@ViewChild('selector', { static: true/false })

비록 이 오류 정보들이 매우 명확하고 유용하지만, 그것들은 '링크' 가 없기 때문에, 나는 Cmd/Ctrl + 를 누르면 문제가 있는 파일을 탐색할 수 있다.
간단하게'정태는 진짜, 가짜?'"조회할 항목이 *ngIf 또는 *ngFor에 있거나 있다면 static는false입니다."

<div *ngIf="...">
  <!-- If querying for this div or anything contained in this div
       then { static: false } -->
</div>
<div *ngFor="...">
  <!-- If querying for this div or anything contained in this div
       then { static: false } -->
</div>

코드와 템플릿을 평가해서 어떤 것이 정확한지 확인해야 합니다.결과는 내 것 하나 이외에 다른 것은 모두 가짜라는 것을 증명했다.
다음은 이 문제를 정식으로 토론하는 migration guide입니다.

ng serve

현재 나는 버전 8 미리보기에서도 약간의 오류를 보았다.

ERROR in app/common/searchable-select.component.ts:27:4 - error 
TS1117: An object literal cannot have multiple properties with the 
same name in strict mode.
27              [disabled]="disabled"
                ~~~~~~~~~~~~~~~~~~~~~

이 경우 같은 이름의 직접 클래스 바인딩과 속성 바인딩을 사용할 수 없습니다. 즉,

<app-some-component 
  [class.disabled]="value" 
  [disabled]="value">
</app-some-component>

나는 이것이 bug이라는 것을 알 권리가 있지만, 나는 이름을 밝히지 않을 것이다.해결책은 간단하다는 얘기다.

<app-some-component 
  [ngClass]="{ disabled: value }" 
  [disabled]="value">
</app-some-component>

ng serve

오.. 이제 좋은 게 하나 있어요.나는 무죄를 간청한다.나는 이 코드 라이브러리를 계승했지만, 지난 1년 동안 그것을 100% 사용하지 않았다.그러나 우리는 @Directive의 기수를 가지고 있는데 @Component은 그 중에서 파생된 것이다.문제는 @Directive이 @Component으로 바뀌면 된다는 것이었다.다음은 오류입니다.

ERROR in app/features/.../derived.component.ts:34:4 - error 
TS8002: 'stepNumber' is not a valid property of <app-derived>.
34              [stepNumber]="getAdjustedStepNumber(2)"
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

구성 요소와 명령의 기본 클래스 및 Ivy가 현재 마이그레이션을 처리하는 방법에 대한 자세한 내용은 https://next.angular.io/guide/migration-undecorated-classes을 참조하십시오.이 글을 쓸 때, Ivy는 나를 위해 이 점을 정확하게 옮기지 않았다.@Input() stepNumber은 파생된 구성 요소가 아니라 기본 구성 요소에 정의되어 있기 때문에 Ivy가 기분이 좋지 않습니다.역시 @Directive()을 다음과 같이 변경하면 컴파일 오류가 수정됩니다.(하지만 전반적으로 계승보다는 조합에 치우친다. 내가 보기에 이런 모델은 최선의 실천이 아니다.)

@Component({
  selector: `app-base`,
  template: ``
})

ng serve
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es7/array' in 
'/myApp/src'

IE 를 지원해야 합니다. 이것은 조건부 다각형 채우기를 사용한다는 것을 의미합니다.그러나 부족한 다각형 충전은 수조인 것 같다.나는 왜 내가 이것을 포함해야 하는지 다른 것이 아니라 완전히 이해할 수 없다.그러나 최신 버전 core-js의 경우 경로에 해당 버전이 없습니다.
버전 삭제를 위해 polyfills.ts 편집:

import 'core-js/es/array';

이제 내 응용 프로그램은 컴파일할 수 있다.축하 시간 다 됐어요!

이제 구축되었으니 이전을 다시 실행해야 한다.마이그레이션이 완료되었는지 확인하려면 ng update을 다시 실행하십시오.이 점에서 나는 세부 사항에 너무 빠져서 이 일을 하는 것을 잊어버리고 결국 그 중의 몇 가지 일을 수동으로 처리했다.네가 계속 책을 읽을 때 주의해야 한다.
나는 또 몇 가지 경고가 있다.

WARNING in /myApp/src/app/common/interfaces/contentSpecialty.ts is 
part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in 
your tsconfig.

이것은 버그인 것 같습니다. 저는 Angular팀과 issue을 열었습니다.이것은 경고일 뿐이기 때문에 공연의 장애가 아니다.이 경고의 출처는 컴파일러가 사용하지 않은 인터페이스를 식별하고 있다는 것입니다.이외에 이 인터페이스를 사용했다.API 호출을 통해 수신된 데이터 구조의 일부입니다.따라서 프로젝트에서 사용하는 아버지 인터페이스에서 인용됩니다.그러나 이 인터페이스는 Angular 코드에 직접 분배된 적이 없고 Angular 코드에 이용된 적이 없다.이 오류를 해결하는 방법은 이 인터페이스를 아버지 인터페이스와 같은 파일로 이동하거나 인터페이스를 아버지 인터페이스에 직접 삽입하는 것입니다.
나는 더욱 간단한 방법을 채택하여 그것을 소홀히 할 것이다.
내 프로그램을 통해 빠른 테스트를 진행하였는데, 일이 예상대로 진행되는 것 같았다.물론, 나는 아무런 이상이 파괴되지 않도록 완전한 회귀 테스트를 하고 싶다.
그런데 패키지의 크기와 성능은?


상춘등 배양 전후의 모듈 크기를 비교하다.
좋아, 이 소식은 결코 좋지 않아.예를 들어, Angular 버전 8에서 main-es2015 번들의 용량은 891kB입니다.하지만 v9에서는 2.03MB가 있습니다!전반적으로 아이비덩굴의 부피는 1.45MB 증가했다.이 문서를 작성하여 CLI는 9.0.0-next로 업그레이드되었습니다.9. 번들 크기를 개선하기 위해 최적화를 추가하기 시작합니다.이것은 최종 배송 코드가 아니라 미리 보기를 추가하는 선택이라는 것을 명심하세요.Angular팀은 여전히 이 방면에서 열심히 일한다.
표현에 관해서는 한 사람으로서 나는 상춘등이 더 많이/더 적게 행동하는 것을 알아차리지 못했다.나는 내가 그것을 묘사할 수 있다고 믿지만, 사실은, 나는 무엇이 다른지 알아차리지 못했다.모든 응용 프로그램은 이 방면에 서로 다른 요구가 있기 때문에, 당신은 반드시 v9과 Ivy에서 자신의 응용 프로그램의 성능을 테스트해야 합니다.
상춘등은 아직 생산이 준비되지 않았고, Angular v9도 아직 준비가 되지 않았다는 것을 일깨워 준다.하지만 이제는 일어나서 상춘등과 함께 살려면 많은 일을 해야 한다는 것을 느낀다.물론 귀하는 다른 일을 할 수 없는 제3자 의존 관계가 있거나 응용 프로그램의 일부분이 저희가 가지고 있지 않은 것을 이용하고 있기 때문에 서로 다른 체험을 할 수 있습니다.
상춘등을 시도할 때 문제가 생기면 문제를 열어 보세요.Angular 팀은 9.0.0 버전을 원활하게 업그레이드하기 위해 노력하고 있습니다.
조심해!

ng conf: 신뢰할 수 있는 웹 서밋에 참여

지역 사회 구성원과 지도자에게 신뢰할 수 있는 웹 응용 프로그램 구축, 고품질 코드 작성, 확장 가능한 체계 구조 선택, 효과적인 자동화 테스트를 만드는 가장 좋은 방법을 배울 수 있습니다.ngconf의 지원 아래 2021년 8월 26일과 27일의 신뢰할 수 있는 인터넷 정상 회의에 참가합니다.
https://reliablewebsummit.com/