Ionic 5 с Angular 9 - Ошибка JIT-компиляции Angular: «@ angular / compiler» не загружен

25

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?

Шашанк Агравал
источник

Ответы:

34

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

На основании ответа от 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

Шашанк Агравал
источник
4
Решение 1 сработало для меня
Джон Ист
Решение 1 работало также
Срдан
1
Обновление @ ionic / native работало для меня. Лучше попробовать и не включать компилятор, если это возможно, так как он собирается увеличить размер выходного файла.
Ли Ганн
1
@ShashankAgrawal - извините, комментарий не был нацелен на вас - я просто прибавляю вес «правильному решению», а не простому «включаю компилятор», который люди все еще могут испытывать к соблазну.
Ли Ганн
1
Я понял вашу точку зрения @LeeGunn, и это нормально, если вы не пытались найти ответ :) Потому что ваш комментарий заставил меня переосмыслить, и я улучшил ответ, переместив этот вариант в качестве последнего средства.
Шашанк Агравал
5

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

M Fuat NUROĞLU
источник
Вы, сэр, легенда, вы не представляете, сколько времени я потерял, и я мог бы просто сделать это. Спасибо!
Рубен Секер
Спасибо, мне приятно :)
M Fuat NUROĞLU
2

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

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

Angular Link: https://angular.io/guide/aot-compiler

Тони
источник
Да, я знаю о @Tony, но меня беспокоит то, почему эта ошибка не появлялась в обычном приложении Angular при обновлении до 9. Она возникала только в приложении Ionic. Может быть какая-то проблема с конфигурацией.
Шашанк Агравал
1

Из-за ионного обновления недостаточно быстро, вы можете попробовать: 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сейчас, чтобы получить последнюю стабильную версию

Trần Quang Hiệp
источник
Это вопрос или вы пытаетесь что-то ответить?
Шашанк Агравал
Ну и ладно, обновление моих @ ionic-native зависимостей до последних стабильных версий действительно работает для меня. Ни один из других обходных путей, упомянутых здесь, тогда не нужен.
FelschR
0

Нужно обновить ионные, а так будет работать. Для угловых при обновлении версия обновляет все зависимые от себя. Но в ионном надо обновить вручную.

"@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",
Шьям Вашиста
источник
0

Запуск npm updateисправил проблему для меня.

HaniBhat
источник
Да, это также сработает, конечно, потому npm updateчто буквально обновит каждую и каждую зависимость, и у вас не будет представления, что именно обновлено и еще много чего. Это также может привести к другим ошибкам.
Шашанк Агравал