지금 Angular 버전 8로 업데이트하세요!

이 게시물은 원래 https://juristr.com/blog/2019/06/angular-v8에 게시되었습니다. 자세한 내용은 juristr.com/blog로 이동하십시오.


방금 출시된 최신 Angular 버전 8에 대해 자세히 살펴보겠습니다. 새로운 기능, 업데이트해야 하는 이유, 작동 방식 및 주의해야 할 사항에 대해 빠르게 살펴보겠습니다.

시작하기 전에 Angular 팀의 릴리스에 대한 공식 게시물도 있습니다.

Check out my related post about "Lazy Load Angular Components"

업그레이드하는 동안 자세한 내용에 대한 링크가 포함된 알림을 받게 됩니다.


https://angular.io/guide/static-query-migration에서 모든 세부 정보를 읽을 수 있습니다.

Angular CLI가 정적 또는 동적 해상도를 사용할지 여부를 자동으로 유추할 수 없는 경우 콘솔에 해당 설명 및 경고를 추가합니다.



요약하자면, 이게 다 뭐야?

다음이 있다고 가정합니다.

<div foo></div>

코드에서 다음과 같은 @ViewChild를 사용합니다.

@ViewChild(Foo) foo: Foo;

(여기서 Foo는 Angular 지시문입니다)

일반적으로 foo가 ngAfterViewInit 다음에 채워질 것이라고 가정하는 것이 항상 안전합니다(또는 ngAfterContentInit가 포함된 콘텐츠 쿼리의 경우 @ContentChild). 그러나 일부는 이미 onInit에서 직접 액세스할 수 있었습니다. 그 이유는 배후의 컴파일러가 그것들을 범주화하기 때문입니다.

즉시 사용 가능한 정적 쿼리

런타임에만 사용할 수 있는 동적 쿼리

위의 코드 예제는 즉시 사용할 수 있기 때문에<div foo> 정적 쿼리의 예입니다. ngOnInit 에서 안전하게 액세스할 수 있습니다. 반면에 다음과 같이 코드를 변경한다고 가정합니다.

<div foo *ngIf="isVisible"></div>

이러한 경우 한 번만 사용할 수 있게 되며isVisible true로 평가되며 이는 앱을 실행하는 동안 언제든지 발생할 수 있습니다. 이러한 쿼리는 동적 쿼리입니다.

주요 문제는 이것이 명시적이지 않았다는 것입니다. 따라서 v8로 업그레이드하면 코드 마이그레이션이 자동으로 코드를 다음으로 변환합니다.

// query results available in ngOnInit
@ViewChild('foo', {static: true}) foo: ElementRef; 

// query results available in ngAfterViewInit
@ViewChild('foo', {static: false}) foo: ElementRef;

TypeScript 업그레이드

Angular 8로 업그레이드하면 TypeScript 3.4로도 업그레이드됩니다. 새로운 기능이 궁금하시다면here's the corresponding documentation .

결과적으로 업그레이드 후(성공적으로 완료되더라도) 오류가 발생할 수 있습니다. 아마도 새로운 잠재적 타이핑 문제를 드러내는 더 나은 유형 추론 때문일 것입니다.

기타 지원 중단

공식 사이트에서 new deprecation guide을 확인하세요. 아직도 질문이 있으신가요? 업그레이드와 관련된 경우 Angular CLI repository에서, 프레임워크와 관련된 경우 Angular repository에서 문제를 엽니다. 또는 단순히 핑 😃

FAQ - 잠재적인 업그레이드 문제

마이그레이션 재실행

Angular 업그레이드를 수행했지만 어떤 이유로든 일부 코드 변환이 성공적으로 완료되지 않은 경우 어떻게 됩니까? node_modules 폴더에 이미 Angular 8(또는 업그레이드 중인 버전)이 있고 package.json .

일반적으로 말하면 Git을 사용하는 것이 좋습니다. 업그레이드 중에 쉽게 앞뒤로 이동할 수 있는 마이그레이션 분기를 만듭니다. 도중에 백업을 받을 수 있도록 각 단계 후에 커밋합니다.

그 외에 Angular CLI는 이미 최신 버전package.json이 있더라도 마이그레이션을 다시 실행할 수 있는 가능성을 제공합니다. 그냥 실행

// re-run CLI schematics
$ ng update @angular/cli --from 7 --to 8 --migrate-only

// re-run Angular core schematics
$ ng update @angular/core --from 7 --to 8 --migrate-only

재료 업그레이드: 치명적인 오류: 힙 제한에 근접한 비효율적인 마크 압축 할당 실패 - JavaScript 힙 메모리 부족

상당히 큰 단일 저장소에서 Angular 자료를 ng update @angular/material로 업그레이드했을 때 다음 예외가 발생했습니다.

<--- Last few GCs --->

[85884:0x103802200]   712051 ms: Scavenge 2004.6 (2047.9) -> 2004.5 (2047.9) MB, 4.1 / 0.0 ms  (average mu = 0.199, current mu = 0.181) allocation failure
[85884:0x103802200]   712072 ms: Scavenge 2006.3 (2048.9) -> 2004.6 (2048.4) MB, 3.8 / 0.0 ms  (average mu = 0.199, current mu = 0.181) allocation failure
[85884:0x103802200]   712077 ms: Scavenge 2005.6 (2049.4) -> 2005.6 (2049.9) MB, 4.3 / 0.0 ms  (average mu = 0.199, current mu = 0.181) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x100e146e6]
Security context: 0x08b76239a2f1 <JSObject>
    1: stringSlice(aka stringSlice) [0x8b725f97839] [buffer.js:~568] [pc=0x1d077761a16a](this=0x08b76f0804d1 <undefined>,0x08b765580f19 <Uint8Array map = 0x8b742025759>,0x08b786894e49 <String[#4]: utf8>,0,1073870)
    2: toString [0x8b7623f02f9] [buffer.js:~622] [pc=0x1d0777ee3789](this=0x08b765580f19 <Uint8Array map = 0x8b742025759>,0x08b786894e49 <String[#4]:...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x100075bd5 node::Abort() [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 2: 0x100076316 node::errors::TryCatchScope::~TryCatchScope() [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 3: 0x1001697d7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 4: 0x10016976c v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 5: 0x1005480d5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 6: 0x1005491c3 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 7: 0x100546bc3 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 8: 0x10054487f v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/jstrumpflohner/.nvm/versions/node/v12.4.0/bin/node]
 ...
[1]    85884 abort      ng update @angular/material @angular/cdk @angular/cdk-experimental

이는 노드 프로세스에 더 많은 메모리가 필요할 때 흔히 발생하는 문제입니다. 이를 해결하려면 다음과 같이 노드 프로세스에 max_old_space_size 옵션을 전달합니다.

$ node --max_old_space_size=8000 ./node_modules/.bin/ng update @angular/material @angular/cdk

Ngrx: 'Observable' 유형은 'Observable' 유형에 할당할 수 없습니다.

NX 기반 모노레포를 v7에서 v8로 업그레이드할 때 발생한 또 다른 이상한 오류는 다음과 같습니다.

ERROR in libs/r3-core/src/lib/+state/app-config/app-config.effects.ts(22,5): error TS2322: Type '(action: LoadAppConfig, state: AppConfigPartialState) => Observable<AppConfigLoaded>' is not assignable to type '(a: LoadAppConfig, state?: AppConfigPartialState) => void | Action | Observable<Action>'.
  Type 'Observable<AppConfigLoaded>' is not assignable to type 'void | Action | Observable<Action>'.
    Type 'Observable<AppConfigLoaded>' is not assignable to type 'Observable<Action>'.
      Types of property 'source' are incompatible.
        Type 'import("/Users/jstrumpflohner/myapp/node_modules/rxjs/internal/Observable").Observable<any>' is not assignable to type 'import("/Users/jstrumpflohner/myapp/node_modules/@nrwl/angular/node_modules/rxjs/internal/Observable").Observable<any>'.
          Types of property 'operator' are incompatible.
            Type 'import("/Users/jstrumpflohner/myapp/node_modules/rxjs/internal/Operator").Operator<any, any>' is not assignable to type 'import("/Users/jstrumpflohner/myapp/node_modules/@nrwl/angular/node_modules/rxjs/internal/Operator").Operator<any, any>'.
              Types of property 'call' are incompatible.
                Type '(subscriber: import("/Users/jstrumpflohner/myapp/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("/Users/jstrumpflohner/myapp/node_modules/rxjs/internal/types").TeardownLogic' is not assignable to type '(subscriber: import("/Users/jstrumpflohner/myapp/node_modules/@nrwl/angular/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("/Users/jstrumpflohner/myapp/node_modules/@nrwl/angular/node_modules/rxjs/internal/types").TeardownLogic'.
                  Types of parameters 'subscriber' and 'subscriber' are incompatible.
                    Property '_parentOrParents' is missing in type 'Subscriber<any>' but required in type 'Subscriber<any>'.

이는 특정 버전에서 RxJS와 Ngrx v7 간의 비호환성 때문인 것으로 보입니다. Ngrx v8로 업그레이드하면 문제가 해결될 수도 있습니다(시도하지는 않았습니다). 제 경우에는 RxJS를 ~6.4.0로 다운그레이드하는 것이 도움이 되었습니다.

$ yarn add rxjs@~6.4.0

또는

$ npm i rxjs@~6.4.0 --save