Angular 10 – O que você deve saber sobre isso

O Angular lançou recentemente uma nova versão em 24 de junho de 2020. Ela foi lançada somente após 4 meses do lançamento da versão 9.0 do Angular. O Angular 10 mais recente é uma versão beta - o que significa que a equipe do Angular está se aproximando do lançamento final da versão mais recente dessa estrutura orientada a scripts desenvolvida pelo Google.

Se você é um desenvolvedor web ou alguém que deseja desenvolver um aplicativo web para o seu negócio, deve saber o que esta nova versão tem a oferecer. Como a versão beta é lançada dentro de 4 meses após o lançamento da última versão, você pode se perguntar se é um sucesso ou um fracasso! Estamos aqui para ajudá-lo a encontrar a resposta. Vamos dar uma olhada nos principais recursos do Angular 10.

Características do Angular 10

Embora a equipe Angular tenha sustentado que a versão mais recente se concentrará principalmente nas ferramentas de qualidade e no ecossistema, em vez de introduzir uma infinidade de novos recursos, realizamos um extenso estudo e trouxemos a você uma lista abrangente das ofertas de valor que você pode esperar da versão . Vamos conferir então.

• Novo seletor de período

A Angular Material UI Component Library agora está equipada com um novo seletor de intervalo de datas. Não tem certeza do que é? Um seletor de intervalo de datas pode ser anexado às páginas da web. Ele exibe calendários para selecionar horários, datas ou qualquer período de tempo predefinido, como “últimos 20 dias”.

Se você quiser que seus usuários selecionem um intervalo de datas em vez de apenas uma única data, use os componentes mat-date-range-picker e mat-date-range-input.

• Configurações mais restritas opcionais

O Angular 10 tem uma configuração de projeto mais rígida ao criar um novo espaço de trabalho com ng new. Depois de habilitar esse sinalizador, ele introduzirá algumas novas configurações em seu projeto, como melhorar a capacidade de manutenção, permitir que a CLI execute uma otimização avançada em seu aplicativo, ajudar a detectar bugs antecipadamente e assim por diante.

Aqui está um escopo de trabalho básico do sinalizador estrito:

-Transformando a verificação do tipo de modelo em Strict
-Habilitando strict more no TypeScript
-Configurando regras de linting para evitar o uso de "qualquer" como uma declaração de tipo
-Reduzindo orçamentos de pacotes padrão

• Avisos sobre importações do CommonJS

O uso de uma dependência compactada com CommonJS torna os pacotes grandes e, portanto, torna o aplicativo mais lento. O Angular 10 avisa os desenvolvedores assim que uma compilação recebe um desses pacotes. Dessa forma, eles podem informar suas dependências de que preferem um pacote de módulo ECMAScript (ESM).

• Atualizações

Algumas atualizações importantes foram trazidas para as dependências do Angular para sincronizar com o ecossistema JavaScript. Estes são os seguintes:

-TypeScript é atualizado para TypeScript 3.9. Ajuda a equipe a trabalhar para melhorar o desempenho e a estabilidade.
-TSLint é atualizado para v6
-TSLib é atualizado para v2.0

O layout do projeto também foi atualizado. Portanto, você pode ver um novo arquivo tsconfig.base.json no Angular 10. Esse arquivo oferece melhor suporte a IDEs, tipo de resolução de ferramenta de compilação e configurações de pacote.

Além disso, a versão mais recente do Angular capacita coisas como acelerar o compilador, editar experiências, correções de prompt e conclusões.

• Desempenho ngcc aprimorado

Esse recurso Angular 10 promove a implementação de um localizador de ponto de entrada baseado em programa. Isso pode processar os pontos de entrada onde apenas programas definidos pelo arquivo tsconfig.json podem alcançar. Além disso, as dependências estão ocultas dentro da exibição do ponto de entrada e podem ser lidas sem serem computadas todas as vezes.

O caminho base de cada pacote junto com os pontos de entrada não precisam ser armazenados no arquivo. Portanto, os aplicativos não precisam armazenar arrays vazios desnecessários. Esse recurso ajuda a manifestar e reduzir o tamanho do arquivo no ponto de entrada, mesmo para os módulos de nó grandes. Isso aumenta significativamente o desempenho.

• Mesclando vários arquivos

A versão mais recente do Angular suporta a mesclagem de vários documentos de tradução sem problemas. Nas versões anteriores, eles podiam carregar apenas um arquivo. Agora os usuários podem especificar vários documentos por localidade e as transações de todos os arquivos podem ser mescladas por um ID de mensagem. O documento mais essencial será colocado em primeiro lugar com traduções de fallback mais tarde.

• Tempo limite de bloqueio assíncrono

Ainda outra coisa interessante sobre o Angular 10 é que o tempo limite de bloqueio Async está configurado nesta versão. Isso oferece suporte ao arquivo ngcc.config.js para ajustar os atrasos e tentativas de repetição no AsyncLocker. Um teste de integração permite que os desenvolvedores monitorem o tempo limite, usem o arquivo ngcc.config.js para reduzir o intervalo de tempo limite e evitar que o teste demore muito. Não é à toa que os profissionais da empresa de desenvolvimento de aplicativos da Web estão recebendo a versão mais recente do Angular com um enorme alívio!

• Roteador

O guarda CanLoad pode voltar ao UrlTree na versão mais recente do Angular. O guarda CanLoad retornando UrlTree anula qualquer navegação de ponta e, por sua vez, ajuda a redirecionar. Isso corresponde ao comportamento atual com os guardas CanActivate disponíveis – eles também são adicionados aqui. No entanto, isso não produz nenhum impacto no pré-carregamento.

• Compilar

Ahead-of-Time (AOT) compila um aplicativo e suas bibliotecas no momento da compilação. Essa é uma prática comum desde o Angular 9. Ele pode converter os códigos durante o tempo de compilação, mesmo antes do download do navegador e, posteriormente, executar esse código. Naturalmente, isso garante uma renderização mais rápida no navegador. O compilador elimina solicitações AJAX separadas para os arquivos de origem ao inserir modelos HTML externos e folhas de estilo CSS no JavaScript do aplicativo.

Existem algumas mudanças evidentes feitas no AOT em Angular 10:

1. Sua compilação incremental ajuda a alcançar melhores tempos de construção
2. Com um código gerado altamente compatível com trepidação de árvores, ele pode atingir tamanhos de compilação melhores
3. A versão permite explorar vários novos recursos, como carregamento lento do componente em vez de módulos, metaprogramação ou componentes de ordem superior, o sistema de detecção de alterações mais recente que não é baseado em Zone.js etc.

• Erro corrigido

Nesta versão, uma série de correções de bugs foram feitas. Isso inclui remover qualquer instância não endereçada do intervalo no compilador, resolver erros relacionados à migração ao importar um símbolo inexistente, identificar os módulos afetados por substituições no TestBed e outros. Além disso, há também uma solução alternativa no núcleo para corrigir o bug Terser Inlining.

• Melhor envolvimento da comunidade

O Angular já possui uma grande comunidade global de desenvolvedores que fornece consistentemente ofertas de valor para projetos Angular em todo o espectro. Recentemente, a própria organização está planejando adotar estratégias e fazer um investimento para fortalecer a comunidade e tornar a plataforma ainda melhor.

• Suspensões e remoções

O formato de pacote angular não inclui mais pacotes FESM5 ou ESM5. Isso permite que você economize 119 MB de tempo de download e instalação enquanto executa yarn ou npm install em bibliotecas e pacotes Angular. Esses formatos podem ser descartados, pois qualquer rebaixamento para auxiliar o ES5 é realizado no final do processo de desenvolvimento.

Além disso, a organização Angular preteriu qualquer suporte para navegadores mais antigos, como IE9, 10 e Internet Explorer Mobile.

• Outras alterações

Angular 10 traz algumas mudanças inovadoras. Por exemplo, o Logic é atualizado em correspondência com a formatação de períodos do dia que se estendem além da meia-noite. Se seu aplicativo usa formatDate ou DatePipe ou mesmo os códigos de formato b e B, ele será afetado por essa alteração.

Outra mudança é que qualquer resolvedor que retorne EMPTY cancelará a navegação. Os desenvolvedores precisam atualizar os resolvedores com algum valor específico como default!Empty.

O Angular NPM não contém alguns comentários jsdoc para dar suporte às otimizações avançadas do Closure Compiler. Aqueles que usam o Closure Compiler devem consumir melhor os pacotes Angular construídos diretamente das fontes em vez de consumir as versões publicadas no NPM. Por um tempo temporário, os usuários podem usar seu pipeline de compilação atual.

Nesta versão, os cabeçalhos Vary são ignorados durante a recuperação das fontes dos caches do ServiceWorker. Isso resulta na recuperação das fontes mesmo que seus cabeçalhos não sejam semelhantes. Se um aplicativo precisar diferenciar suas respostas com base nos cabeçalhos de solicitação, certifique-se de que o Angular ServiceWorker esteja configurado para evitar o armazenamento em cache de qualquer recurso afetado.

Os avisos sobre quaisquer elementos desconhecidos agora são anotados como erros. Isso não interromperá seu aplicativo, mas pode acionar ferramentas que esperam ser registradas por meio de console.error.

Como atualizar para Angular 10

Para atualizar para a versão mais recente do Angular, você pode usar o seguinte comando:

ng update @angular/cli @angular/core

Aqui está uma diretriz definitiva sobre a atualização para a versão 10 do Angular. No entanto, sem conhecimento técnico, o comando pode não ser útil. Contrate serviços profissionais de desenvolvimento Angular para atualizar com sucesso para o Angular 10.

Conclusão
Toda a conveniência oferecida pelo Angular 10 talvez tenha convencido você a atualizar a versão da estrutura do seu aplicativo. Confie em nós, vale a pena o esforço.