Dev (Back & Front)ARTIGO

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.

Ver perfil