Búsqueda de sitios web

typescript - Ionic 5 con Angular 9 - Falló la compilación JIT de Angular: '@angular/compiler' no cargado

Ionic 5 fue anunciado hace unas horas (12 de febrero de 2020) y actualicé una de mis pequeñas aplicaciones de producción a Ionic 5 junto con 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

Pero cuando ejecuté ionic serve, empecé a recibir el siguiente error:

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)

Me encontré con algunos problemas de Angular en GitHub:

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

Están diciendo que se incluya import '@angular/compiler'; en el archivo main.ts, pero cuando comparé con una de mis otras aplicaciones Angular 9 (que actualicé recientemente), no veo dicha configuración allí.

¿Angular 9 no es compatible con Ionic 5?

Respuesta #1

Solución actualizada y correcta para arreglar esto

Basándome en la respuesta de Tran Quang, fui a ver el CHANGELOG.md de ionic-native y me enteré de que recientemente actualizaron su paquete para compilar con Angular 9.

Por lo tanto, necesitas actualizar cualquiera/todas las dependencias de @ionic-native. Para esto, mira todas las dependencias en tu archivo package.gson que comiencen con @ionic-native/ y actualízalas una por una.

Por ejemplo, este es mi package.gson:

Así que tuve que ejecutar los siguientes comandos para actualizar todas mis dependencias de @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

Lo mismo tienes que hacer con tus dependencias de @ionic-native. Solo asegúrate de que estén actualizadas como mínimo a v5.21.5 (porque algunas versiones antiguas no funcionaban).

Salud 😀🎉🎊

Si por alguna razón no puedes actualizar tus dependencias de @ionic-native, mira mi respuesta original para diferentes soluciones/alternativas ⬇️

Respuesta original

Para mí, las siguientes soluciones funcionaron. No estoy seguro de si son perfectas para agregar, pero espero que el equipo de Ionic lo arregle, ya que estas soluciones no eran necesarias cuando actualicé mi aplicación Angular simple a Angular 9.

Solución 1

Apaga el AOT cambiando "aot": true a "aot": false en el archivo angular.json. No recomendaría esto ya que mejora el rendimiento de la aplicación Angular y mejora la detección de códigos de error en el modo de desarrollo.

Solución 2

Si no quieres cambiar en angular.json y quieres solucionar este problema solo para ionic serve, pasa el indicador --aot=false al comando ng usando --:

ionic serve -- --aot=false

Solución 3 (opción ciega)

Si ninguna de las soluciones anteriores está funcionando para ti, puedes ejecutar el comando npm update que actualizará literalmente todas las dependencias de tu package.json (eso significa que las dependencias de Ionic también se actualizarán).

Esta es una opción ciega porque no tendrás idea de qué dependencias se actualizan y cuáles son los cambios incompatibles en esas dependencias actualizadas. Por lo tanto, podrías terminar solucionando otros problemas debido a esto.

Así que depende de ti asumir este riesgo :) Bueno, vale la pena hacerlo si tu aplicación no es tan grande o no usa ningún código que haya sido eliminado en las nuevas dependencias.

Solución 4 (la última y peor opción)

Agrega import '@angular/compiler'; en el archivo main.ts. Pero esto podría aumentar el tamaño del paquete.

Extra

Al actualizar Ionic, podrías enfrentar otro problema debido a un import incorrecto en polyfills.ts. Si es así, revisa que src/zone-flags.ts no esté incluido en la compilación de TypeScript después de actualizar a Ionic 5

Respuesta #2

Para Angular: Detener el terminal y volver a servirlo ng serve resolvió el problema para mí.

Artículos relacionados