Ionic 5 был анонсирован несколько часов назад (12 февраля 2020 года), и я обновил свое одно из небольших производственных приложений до Ionic 5 вместе с Angular 9:

# 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файл, но когда я сопоставил одно из моих других приложений Angular 9 (которое я недавно обновил), я не вижу там таких конфигураций.

Angular 9 не совместим с Ionic 5?

Обновленное и правильное решение, чтобы исправить это

На основании ответа от Tran Quang , я пошел к CHANGELOG.md из ionic-nativeи узнал , что они недавно обновили свой пакет для компиляции с угловыми 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": trueв "aot: falseв angular.jsonфайле. Я не рекомендовал бы это, поскольку это улучшает производительность приложения Angular и улучшает отлов кодов ошибок в режиме разработки.

Решение 2

Если вы не хотите вносить изменения angular.jsonи хотите исправить эту проблему ionic serveтолько, передайте --aot=falseфлаг ngкоманде, используя --:

ionic serve -- --aot=false

Решение 3 (слепой вариант)

Если ни одно из вышеперечисленных решений не работает для вас, вы можете запустить команду, npm updateкоторая обновит буквально все ваши зависимости package.json(это означает, что ионные зависимости также будут обновлены).

Это слепой вариант, потому что вы не будете иметь представления о том, какие зависимости обновляются и каковы критические изменения в этих обновленных зависимостях. Таким образом, вы можете решить другие проблемы из-за этого.

Так что вы сами рискуете этим :) Ну, это стоит делать, если ваше приложение не такое большое или не использует какие-либо коды, которые удалены в более новых зависимостях.

Решение 4 (последний и худший вариант)

Добавить import '@angular/compiler';в main.tsфайл. Но это может увеличить размер пакета.

дополнительный

При обновлении ионного, вы можете столкнуться с другим вопросом из - за неправильные importв polyfills.ts. Если да, проверьте src / zone-flags.ts отсутствует в компиляции TypeScript после обновления до Ionic 5

Для Angular: остановка терминала и его повторное обслуживание ng serveрешили проблему для меня.

Попробуйте ng serve --aot, это помогло мне решить проблему, вот если вы хотите запустить с aot, который рекомендуется, так как он будет похож на производственную сборку и поможет вам быстрее находить ошибки.

Надеюсь это поможет.

Angular Link: 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исправил проблему для меня.