몇 시간 전에 Ionic 5가 발표 되었고 (2020 년 2 월 12 일) 작은 생산 앱 중 하나를 Angular 9와 함께 Ionic 5로 업그레이드했습니다.

# To update to Ionic 5
npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save-exact --save

# To update to Angular 9
ng update @angular/core @angular/cli

그러나 내가 할 때 ionic serve벨로 오류가 발생하기 시작했습니다.

Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at getCompilerFacade (core.js:610)
    at Function.get (core.js:16065)
    at getInjectableDef (core.js:362)
    at injectableDefOrInjectorDefFactory (core.js:16816)

몇 가지 Angular GitHub 문제가 발생했습니다.

1. https://github.com/angular/angular-cli/issues/16873
2. https://github.com/angular/angular/issues/32466

그들은 포함하는 말 import '@angular/compiler';에 main.ts파일하지만 (나는 최근에 업데이트) 내 다른 각도 9 응용 프로그램 중 하나를 일치 할 때, 나는 거기 이러한 구성을 볼 수 없습니다.

Angular 9는 Ionic 5와 호환되지 않습니까?

이 문제를 해결하기 위해 업데이트 및 올바른 솔루션

Tran Quang 의 답변을 바탕으로 CHANGELOG.md 를 보았고 ionic-native최근 Angular 9로 컴파일하기 위해 패키지를 업데이트했음을 알게되었습니다.

따라서의 모든 종속성을 업데이트해야합니다 @ionic-native. 이를 위해 package.gson파일의 모든 종속성을 살펴보고 @ionic-native/하나씩 업데이트하십시오.

예를 들어, 이것은 내 package.gson:

따라서 모든 @ionic-native종속성 을 업데이트하려면 다음 명령을 실행해야했습니다 .

npm i @ionic-native/core@latest
npm i @ionic-native/camera@latest
npm i @ionic-native/firebase-x@latest
npm i @ionic-native/splash-screen@latest
npm i @ionic-native/status-bar@latest

@ionic-native의존성에 대해서도 마찬가지입니다. v5.21.5이전 릴리스가 작동하지 않았기 때문에 최소로 업데이트되었는지 확인하십시오 .

건배 😀🎉🎊

어떤 이유로 든 @ionic-native종속성을 업데이트 할 수없는 경우 다른 해결 방법 / 솔루션에 대한 내 원래 답변을보십시오 ⬇️

원래 답변

나를 위해 다음 솔루션이 효과가있었습니다. 그들이 완벽하게 추가되는지 확실하지 않지만 Ionic 팀이 일반 Angular 앱을 Angular 9로 업그레이드 할 때 이러한 솔루션이 필요하지 않았기 때문에이 문제를 해결할 것으로 기대합니다.

해결책 1

변경하여 AOT를 끄고 "aot": true에 "aot: false에 angular.json파일. 이것이 Angular 앱의 성능을 향상시키고 개발 모드에서 오류 코드를 잡는 것을 향상시키기 때문에 이것을 권장하지 않습니다.

해결책 2

변경하지 angular.json않고이 문제 ionic serve만 해결하려면 다음 을 사용하여 --aot=false플래그를 ngcommand에 전달하십시오 --.

ionic serve -- --aot=false

솔루션 3 (블라인드 옵션)

위의 해결 방법으로도 효과가 없으면 명령 npm update을 실행하여 문자 그대로 모든 종속성을 업데이트합니다 package.json(즉, 이온 종속성도 업데이트 됨).

업데이트 된 종속성과 업데이트 된 종속성의 주요 변경 사항에 대해 알지 못하므로 맹목적인 옵션입니다. 따라서 이로 인해 다른 문제가 해결 될 수 있습니다.

따라서이 위험을 감수하는 것은 당신에게 달려 있습니다 :) 글쎄, 이것은 앱이 그렇게 크지 않거나 새로운 의존성에서 제거 된 코드를 사용하지 않으면 가치가 있습니다.

솔루션 4 (마지막 및 최악의 옵션)

추가 import '@angular/compiler';로 main.ts파일. 그러나 이것은 번들 크기를 증가시킬 수 있습니다 .

특별한

이온을 업그레이드하는 동안, 당신 때문에 잘못의 또 다른 문제에 직면 할 수 import에서 polyfills.ts. 그렇다면 Ionic 5로 업그레이드 한 후 TypeScript 컴파일에서 src / zone-flags.ts가 누락 되었는지 확인하십시오

Angular의 경우 : 터미널을 중지하고 다시 예약 ng serve하면 문제가 해결되었습니다.

시도해보십시오 ng serve --aot. 문제를 해결하는 데 도움이되었습니다. 즉, 프로덕션 빌드와 비슷하기 때문에 권장되는 aot로 실행하려는 경우 더 빨리 오류를 포착하는 데 도움이됩니다.

도움이 되었기를 바랍니다.

앵귤러 링크 : https://angular.io/guide/aot-compiler

이온 업데이트가 빠르지 않기 때문에 시도해 볼 수 있습니다 npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -S.

업데이트 2020/02/18 => npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -S최신 안정 버전을 얻기 위해 지금 실행할 수 있습니다

이온도 업데이트해야 작동합니다. 업데이트 버전의 각도의 경우 모든 종속 자체를 업데이트합니다. 그러나 이온에서는 수동으로 업데이트해야합니다.

"@angular/common": "9.0.5",
    "@angular/core": "9.0.5",
    "@angular/forms": "9.0.5",
    "@angular/platform-browser": "9.0.5",
    "@angular/platform-browser-dynamic": "9.0.5",
    "@angular/router": "9.0.5",
    "@ckeditor/ckeditor5-angular": "1.2.2",
    "@ckeditor/ckeditor5-build-classic": "17.0.0",
    "@ionic-native/camera": "5.22.0",
    "@ionic-native/core": "5.22.0",
    "@ionic-native/crop": "5.22.0",
    "@ionic-native/device": "5.22.0",
    "@ionic-native/diagnostic": "5.22.0",
    "@ionic-native/document-viewer": "5.22.0",
    "@ionic-native/file": "5.22.0",
    "@ionic-native/file-opener": "5.22.0",
    "@ionic-native/file-path": "5.22.0",
    "@ionic-native/file-transfer": "5.22.0",
    "@ionic-native/fingerprint-aio": "5.22.0",
    "@ionic-native/image-picker": "5.22.0",
    "@ionic-native/in-app-browser": "5.22.0",
    "@ionic-native/network": "5.22.0",
    "@ionic-native/splash-screen": "5.22.0",
    "@ionic-native/status-bar": "5.22.0",
    "@ionic-native/toast": "5.22.0",

실행 npm update하면 문제가 해결되었습니다.