Ionic 5 com Angular 9 - Falha na compilação JIT angular: '@ angular / compiler' não carregado

25

O Ionic 5 foi anunciado há algumas horas (12 de fevereiro de 2020) e atualizei meu aplicativo de produção pequeno para o Ionic 5 junto com o 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

Mas quando fiz isso ionic serve, comecei a receber o erro abaixo:

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 deparei com alguns problemas do Angular GitHub:

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

Eles estão dizendo para incluir import '@angular/compiler';no main.tsarquivo, mas quando correspondi a outro aplicativo Angular 9 (que atualizei recentemente), não vejo essas configurações lá.

O Angular 9 não é compatível com o Ionic 5?

Shashank Agrawal
fonte

Respostas:

34

Solução atualizada e correta para corrigir isso

Com base na resposta de Tran Quang , eu fui ver o CHANGELOG.md de ionic-nativee vim a saber que eles atualizado recentemente seu pacote para compilar com Angular 9.

Portanto, você precisa atualizar qualquer / todas as dependências de @ionic-native. Para isso, observe todas as dependências do seu package.gsonarquivo que começam com @ionic-native/e atualize-as uma a uma.

Por exemplo, este é o meu package.gson:

insira a descrição da imagem aqui

Então, eu tive que executar os seguintes comandos para atualizar todas as minhas @ionic-nativedependências:

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

O mesmo que você precisa fazer por suas @ionic-nativedependências. Apenas verifique se eles são atualizados no mínimo para v5.21.5(porque alguns lançamentos antigos não estavam funcionando).

Saúde 😀🎉🎊

Se, por algum motivo, você não puder atualizar suas @ionic-nativedependências, consulte minha resposta original para obter diferentes soluções / soluções alternativas ⬇️


Resposta original

Para mim, as seguintes soluções funcionaram. Não tenho certeza se eles são perfeitos para adicionar, mas espero que a equipe Ionic resolva isso, pois essas soluções não eram necessárias quando eu atualizei meu aplicativo Angular simples para o Angular 9.

Solução 1

Desligue o AOT alterando "aot": truepara "aot: falseno angular.jsonarquivo. Eu não recomendaria isso, pois isso melhora o desempenho do aplicativo Angular e melhora a captura de códigos de erro no modo de desenvolvimento.

Solução 2

Se você não deseja alterar angular.jsone deseja corrigir esse problema ionic serveapenas, passe o --aot=falsesinalizador para o ngcomando usando --:

ionic serve -- --aot=false

Solução 3 (opção cega)

Se nenhuma das soluções acima estiver funcionando para você, você pode executar um comando npm updateque atualizará literalmente todas as suas dependências package.json(isto significa, as dependências iônicas também serão atualizadas).

Essa é uma opção cega, porque você não terá idéia de quais dependências são atualizadas e quais são as alterações mais recentes nessas dependências atualizadas. Portanto, você pode acabar corrigindo outros problemas por causa disso.

Portanto, é sua responsabilidade arriscar :) Bem, vale a pena fazer isso se seu aplicativo não for tão grande ou não usar códigos removidos nas dependências mais recentes.

Solução 4 (a última e a pior opção)

Adicionar import '@angular/compiler';no main.tsarquivo. Mas isso pode aumentar o tamanho do pacote.

Extra

Ao atualizar Ionic, você pode enfrentar outro problema por causa de errado importem polyfills.ts. Se sim, confira src / zone-flags.ts que está faltando na compilação TypeScript após a atualização para o Ionic 5

Shashank Agrawal
fonte
4
Solução 1 funcionou para mim
John East
Solução 1 também funcionou
Srdan
11
Atualizar @ ionic / native funcionou para mim. É melhor tentar e não incluir o compilador, se possível, pois isso aumentará o tamanho do arquivo de saída.
Lee Gunn
11
@ShashankAgrawal - desculpe, o comentário não foi direcionado a você - estou apenas adicionando peso à "solução correta" e não é fácil "incluir o compilador" que as pessoas ainda podem ser tentadas a usar.
Lee Gunn
11
Entendi seu ponto de vista @LeeGunn e tudo bem se você não estava buscando a resposta :) Porque seu comentário me fez repensar e eu melhorei a resposta movendo essa opção como último recurso.
Shashank Agrawal 25/04
5

Para Angular: Parar o terminal e re-servi-lo ng serveresolveu o problema para mim.

M Fuat NUROĞLU
fonte
Você é uma lenda, não faz ideia de quanto tempo perdi e poderia ter feito isso. Obrigado!
Ruben Szekér 25/03
Obrigado, é um prazer :)
M Fuat NUROĞLU 25/03
2

Tente ng serve --aot, isso me ajudou a resolver o problema, ou seja, se você deseja executar com o aot, o que é recomendado, pois será semelhante ao build de produção e ajudará a detectar erros mais rapidamente.

Espero que isto ajude.

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

Tony
fonte
Sim, eu conheço o @Tony, mas minha preocupação é por que esse erro não apareceu no aplicativo Angular normal quando atualizado para 9. Ele ocorreu apenas no aplicativo Ionic. Pode haver algum problema de configuração.
Shashank Agrawal
1

Devido à atualização iônica não ser rápida o suficiente, você pode tentar: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -Strabalhe para mim.

update 2020/02/18 => podemos rodar npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Sagora para obter a última versão estável

Trần Quang Hiệp
fonte
Esta é uma pergunta ou você está tentando responder alguma coisa?
Shashank Agrawal 18/02
Bem, atualizar minhas dependências nativas iônicas @ para as últimas versões estáveis ​​realmente funcionou para mim. Nenhuma das outras soluções alternativas mencionadas aqui são necessárias então.
FelschR 18/02
0

precisa atualizar iônico também, ele vai funcionar. Para angular ao atualizar a versão, ele atualiza todos os dependentes. Mas na iônica precisa atualizar manualmente.

"@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",
Shyam Vashista
fonte
0

A execução npm updatecorrigiu o problema para mim.

HaniBhat
fonte
Sim, isso também funcionará, é claro, porque npm updateatualizará literalmente cada dependência, e você não terá uma idéia do que é atualizado e outros enfeites. Isso também pode levar a outros erros.
Shashank Agrawal 31/03