Dev & EngARTIGO

Habilitando o Ivy no Angular 8

Com o lançamento da versão 8 do Angular finalmente conseguimos utilizar o novo compilador do Framework, o Ivy. O que é Ivy? Saiba neste artigo.

Habilitando o Ivy no Angular 8
Imagem: Kheronn Machado

Com o lançamento da versão 8 do AngularAngular30 conteúdosCriando Micro Frontends Angular com Native FederationDev (Back & Front) · mar 2026Angular v21 e o Fim da Cobertura de Testes Exclusivamente em TypeScript: Por Que Precisamos Repensar os Testes de ComponentesDev (Back & Front) · jan 2026Angular 8 é lançado com builder APIs e suporte web workerDev (Back & Front) · mai 2019Ver tudo em Dev (Back & Front) finalmente conseguimos utilizar o novo compilador do Framework, o Ivy.

O que é Ivy?

Quem está acompanhando as versão do Angular se deparou nos últimos tempos com o termo.

Trata-se de uma reescrita completa do compilador e tempo de execução sem alterar a forma como escrevemos aplicações em Angular.

Entre os objetivos dessa mudança, podemos listar:

  • Melhor tempo de compilação (com uma compilação mais incremental);
  • Redução do tamanhos de compilação;
  • Desbloqueie novos recursos em potencial como metaprogramação ou componentes de ordem superior;
  • Carregamento lento de componente em vez de módulos;
  • Sistema novo de detecção de alterações não baseado em zone.js.

Como Habilitar?

Projeto Novo

Podemos definir o uso do Ivy na construção do projeto.

No terminal informe:

A flag –enable-ivy já configura o projeto, definindo as configurações necessárias para uso do novo compilador.

Para um projeto existente

As seguintes alterações devem ser realizadas.

Encontre o arquivo tsconfig.app.json na raíz do projeto e defina a propriedade enableIvy para true dentro de angularCompilerOptions .

javascript
{
“compilerOptions”: { … },
“angularCompilerOptions”: {
“enableIvy”: true
}
}

O segundo passo é a definição da compilação em AOT (mais detalhes em https://angular.io/guide/aot-compiler)

No arquivo de configuração angular.json defina as opções de construção padrão para o seu projeto para sempre usar a compilação AOT.

javascript
{
"projects": {
"my-existing-project": {
"architect": {
"build": {
"options": {
...
"aot": true,
}
}
}
}
}
Está feito!!!

Não esqueça de gerar sua aplicação com ng build — — prod.

Se atualizou sua aplicação e qsuiser compartilhar, deixe nos comentários a diferença do bundle.

Até mais !

Referências

Angular
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers…angular.io

Mestre em Informática pela Universidade Federal do Paraná. Atuo como professor e assessor pedagógico em Tecnologias Educacionais na rede Estadual de Educação do Paraná, NRE de Wenceslau Braz. Interesse em tecnologias que contribuam para aprendizagem significativa.

Mais de Kheronn Machado
Ver perfil
Leia também