Angular 11 – Tudo o que você precisa saber

A versão 11 do Angular chegou e trouxe ótimas atualizações para os desenvolvedores. Do framework aos componentes e CLI – tudo é atualizado. A equipe Angular tenta trazer algumas mudanças importantes a cada atualização. Por exemplo, o iVY foi lançado no Angular 9, o suporte para Typescript 3.8 foi fornecido no Angular 9.1 e as modificações na biblioteca de componentes da interface do usuário do Angular Material foram apresentadas no Angular 10. Hoje, exploraremos os recursos do Angular 11. Vamos nos aprofundar então.

Angular 11 - Recursos e atualizações

O destaque desta versão são os tipos mais rígidos, inlining automático de fontes e melhorias no desempenho do roteador. O inlining de fonte automática padrão será ativado para os aplicativos atualizados. O desempenho aprimorado do roteador garante que os aplicativos sejam feitos mais rápidos. Além disso, há mais no Angular 11 que listaremos abaixo.

#Arneses de teste de componentes

Na versão 9 do Angular, a comunidade introduziu os Component Test Harnesses. Eles forneceram uma superfície de API robusta para auxiliar no teste de componentes do Angular Material. Ele permite que o desenvolvedor interaja com os componentes usando a API suportada.

Na versão 11, um chicote de componentes está disponível para cada componente. Ele vem com muitas melhorias de desempenho, atualizações e até novas APIs. Agora, a função paralela facilita lidar com ações assíncronas dentro dos testes, pois os desenvolvedores podem executar várias interações assíncronas com os componentes em paralelo. Por exemplo, uma função de detecção de alteração manual dará acesso a um melhor controle de detecção simplesmente desabilitando as detecções de alteração automática dentro dos testes de unidade.

#Updated Suporte de substituição de módulo ativo

Hot Module Replacement ou HMR é um mecanismo que permite a substituição dos módulos sem atualizar um navegador completo. Este é um conceito antigo, mas o Angular 11 adiciona mais a ele.

O Angular 11 oferece suporte para HMR com alterações e configurações de código necessárias. Ele permite que a CLI habilite o HMR ao iniciar um aplicativo com ng serve. O comando a seguir é necessário para começar:

ng servir –hmr

Assim, o comando CLI reduz significativamente a quantidade de esforço necessária para configurar o HMR. Depois que os desenvolvedores inserirem esse comando, o console exibirá uma mensagem assim que o servidor local confirmar que o HMR está ativo.

Durante o desenvolvimento, as alterações mais recentes nos modelos, estilos e componentes serão atualizadas automaticamente no aplicativo em execução. Não requer uma atualização de página inteira, o que, por sua vez, aumenta a produtividade dos desenvolvedores.

#Updated Visualização do serviço de idiomas

O Angular Language Service oferece várias ferramentas úteis que, de acordo com os profissionais de qualquer empresa de desenvolvimento de sites, garantem um desenvolvimento web sem complicações. O serviço de idiomas atualizado fornecerá uma experiência mais precisa aos desenvolvedores. Eles podem verificar uma prévia de como as coisas funcionarão com um renderizador e mecanismo de visualização melhores. O serviço de linguagem poderá inferir corretamente tipos genéricos em modelos, assim como o compilador TypeScript faz.

#Inlining Automático de Fontes

O Angular 11 oferece inlining de fonte automático que ajuda a converter ícones e fontes do Google em inline no índice HTML. Durante a compilação, o Angular CLI fará o download e, consequentemente, incorporará as fontes inline que estão vinculadas e usadas no aplicativo. Eles são habilitados por padrão para configuração.

Isso é padrão nos aplicativos criados com a versão 11. Portanto, para aproveitar a vantagem dessa otimização, os desenvolvedores precisam atualizar o aplicativo primeiro.

Suporte #Webpack 5

Webpack é usado para compilar muitos arquivos em um único arquivo pequeno ou pacote. Sua versão mais recente – Webpack 5 foi lançada há alguns meses.

O Angular 11 oferece suporte experimental para o webpack 5 e os desenvolvedores podem usá-lo para experimentar coisas novas. A equipe Angular pode estender o suporte experimental para obter pacotes menores e compilações mais rápidas assim que o webpack se tornar mais estável.

Aqui está o comando para usar o webpack 5. Adicione as seguintes linhas ao arquivo package.json:

“resoluções”: {
“webpack”: “5.4.0”
}

#Shift para ESLint

O TSLint tem sido uma das ferramentas de listagem mais populares usadas e recomendadas pelos provedores de serviços de desenvolvimento Angular. Recentemente, o dever foi entregue à ESLint.

Com o Angular 11, o Codelyzer e o TSLint estão oficialmente obsoletos e serão removidos em versões futuras. A versão mais recente introduziu um método de 3 etapas para migrar do TSLint para o ESLint:

Passo 1 – Execute ng add @angular-eslint/schematics
Passo 2 – Agora, execute o comando ng g @angular/schematics:convert-tslint-to-eslint {{YOUR PROJECT NAME}}
Etapa 3 – Remova o tslint.json de nível raiz.

#Construções mais rápidas

Angular 11 traz melhorias radicais de velocidade. O processo de atualização do NGCC agora é 2-4x mais rápido do que antes. Portanto, os desenvolvedores não precisam gastar muito tempo esperando a conclusão de compilações e reconstruções.

Suporte #TypeScript 4.0

Angular 11 suporta TypeScript 4.0. O suporte para TypeScript 3.9 foi descartado. Uma das principais razões por trás disso é aumentar a velocidade das compilações. A versão mais recente garante compilações mais rápidas e suaves do que as versões anteriores.

#Melhor registro e geração de relatórios

A versão mais recente do Angular trouxe várias alterações nos relatórios da fase do construtor que o tornam mais útil durante o desenvolvimento. A saída da CLI inclui informações mais fáceis de usar e legíveis.

#Outras alterações

Além das mencionadas acima, a versão mais recente do Angular traz várias outras mudanças como:

• Melhorias do trabalhador de serviço
• Novos esquemas e migrações automatizados
• Suporte de carregamento lento para vários pontos de venda nomeados
• O suporte para Internet Explorer 9,10 e suporte móvel do IE é totalmente removido
• preserveQueryParams é removido no roteador. Em vez disso, os desenvolvedores podem usar queryParamsHandling=”preserve”
• Tipos mais rigorosos agora são construídos em tubos
• Angular CLI pode gerar guardas de resolução
• A função formatDate suporta a formatação de ano de numeração de semana ISO 8601
• As expressões dentro das UTIs agora são verificadas novamente
• O pipe assíncrono não retorna mais indefinido para qualquer entrada que tenha sido digitada como indefinida.

Como atualizar para Angular 11

Você pode contratar desenvolvedores Angular para atualizar seu aplicativo para Angular 11. Os desenvolvedores precisam executar o seguinte comando:

ng update @angular/cli @angular/core

Achou o artigo útil? Compartilhe com seus conhecidos e deixe-os saber tudo sobre o Angular 11.