Esta postagem foi publicada originalmente em meu website: https://dsebastien.net
Neste artigo, examinarei (quase) tudo que é digno de nota neste novo lançamento. Também destacarei o que mudou no Angular, assim como fiz com meus artigos anteriores sobre Angular11 e Angular10.
Se você está apenas procurando a vista aérea, confira o anúncio oficial de lançamento. Aqui, vou me aprofundar muito nas notas de lançamento.
Junte-se à Ivy League ...
A equipe Angular tem trabalhado em hera (o novo pipeline de compilação e renderização) desde 2018. Ele foi finalmente lançado com o Angular 8. Desde o Angular 9, o Ivy tem sido o padrão para novos projetos e o ecossistema está migrando lentamente para ele. Com Angular 12, o antigo View Engine agora está oficialmente obsoleto. Ele será removido em uma versão principal futura. Além disso, não será possível criar novos aplicativos usando o View Engine. Finalmente, Ivy agora é o padrão para novos projetos de biblioteca.
Neste ponto, os autores da biblioteca ainda podem contar com o View Engine graças a ngcc
(o compilador de compatibilidade do Angular), mas é realmente hora de eles avaliarem se podem migrar suas bibliotecas para Ivy ou não. Algumas semanas atrás, Minko Gechev publicou um artigo para explicar isso em detalhes. Além disso, verifique os relacionados RFC.
Caso você não saiba, ngcc
é o pequeno processo executado depois de criar um projeto Angular ou instalar dependências. Quando você vê mensagens como Compiling ... : es2015 as esm2015
, É ngcc
fazendo seu trabalho. o que ngcc
O que faz é compilar bibliotecas que dependem do View Engine para que Ivy possa consumi-las.
Como eu, você provavelmente notou que ngcc
leva muito tempo para ser executado e tem um impacto muito negativo na experiência do desenvolvedor. É por isso que é crucial para o ecossistema Angular migrar para Ivy o mais rápido possível. Em segundo lugar, até que a maioria do ecossistema tenha mudado, a equipe do Angular terá que manter o View Engine por perto, o que é problemático por uma série de razões. Por último, mas não menos importante, as bibliotecas que dependem do View Engine não podem depender das Ivy.
Os autores de bibliotecas provavelmente não podem migrar para o Ivy muito rápido, mas eles devem forçar os usuários relutantes a atualizar. De qualquer forma, o caminho a seguir é migrar todas as coisas para Ivy o mais rápido possível
Há um excelente artigo sobre Ivy ali.
Tchau transferidor
Em abril, a equipe Angular anunciou planos para encerrar o apoio de Transferidor no final de 2022.
A partir do Angular 12, o Protractor não será incluído por padrão em novos projetos. Em vez disso, o Angular CLI fornecerá opções para usar outras soluções como Cipreste, WebdriverIOou TestCafé. Isso significa que o ng e2e
comando deve continuar a ser suportado no futuro.
Conforme foi esclarecido em o anúncio, em 2013, quando o Protractor foi criado, webdriver não era um padrãoe testes ponta a ponta (e2e) eram difíceis de escrever e um pesadelo de manter. Transferidor trouxe uma solução inovadora ao embrulhar selênio-webdriver, e forneceu uma maneira de controlar o fluxo de execução.
Claro, muitas coisas evoluíram desde então. Agora temos o WebDriver
APIs, async
e await
(mesmo de nível superior await
, woah). Além disso, o ecossistema também evoluiu. Soluções como Cipreste, Dramaturgo, Marionetista ganharam muita (merecida) popularidade. Ferramentas como o Cypress, por exemplo, fornecem uma experiência de desenvolvedor muito melhor do que o Protractor, alavancam os padrões modernos e até suportam testes entre navegadores (entre outros recursos poderosos). Outro benefício das ferramentas de teste e2e de fato atuais é que elas são independentes de estrutura, o que é muito valioso.
Resumindo, manter o Transferidor não faz muito sentido para a equipe Angular. A evolução do Transferidor agora exigiria muito esforço e induziria uma tonelada de mudanças de interrupção. Você pode encontrar mais detalhes no RFC, é uma leitura interessante.
O cronograma é importante para equipes / projetos que investiram muito tempo e energia escrevendo testes e2e com o Protractor. A equipe Angular ainda está ocupada avaliando o feedback coletado por meio da RFC, então provavelmente saberemos mais no final deste ano.
Enfim; experimente Cypress, se ainda não o fez, não ficará desapontado! A propósito, continuo recomendando a todos que comecem a usar Nrwl NX, uma solução maravilhosa que inclui suporte para Angular, React, Next.js, Cypress e muito mais
Aglutinação nula
Angular 12 inclui suporte para usar o operador de coalescência nula em modelos angulares. E isso é incrível! Esse operador é compatível com TypeScript desde a versão 3.7.
Se você ainda não ouviu falar sobre essa operadora, deixe-me dar uma explicação rápida. A ideia é ser capaz de definir um valor substituto caso algo seja null
or undefined
. Aqui está um exemplo:
If foo
is null
or undefined
, Em seguida x
será definido para true
(ou seja, o valor de fallback), e podemos defini-lo como quisermos.
Sem este incrível ??
operador, teríamos que escrever isso em vez disso:
let x = foo !== null && foo !== undefined ? foo : true;
Agora que o Angular também oferece suporte, podemos finalmente escrever expressões como:
{{ age ?? calculateAge() }}
Em vez da alternativa antiga e mais prolixa. ORGANIZADO!
Você pode aprender mais sobre essa mudança SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Você pode encontrar mais informações sobre coalescência nula no Manual do TypeScript bem como em DND.
Suporte TypeScript 4.2
Angular 12 apresenta suporte para TypeScript 4.2, o que significa que agora podemos usar um tonelada de novos recursos de linguagem maravilhosos. Além disso, o suporte para TypeScript 4.0 e 4.1 foi eliminado.
Aqui está um rápido resumo do que o TS 4.2 inclui:
Preservação de alias de tipo inteligente: Os tipos esperados são exibidos por editores de código em vez de tipos brutos, como ocorria antes. Você pode aprender mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Elementos de avanço / descanso intermediário em tipos de tupla: Agora podemos incluir elementos restantes em qualquer lugar dentro de uma tupla (com algumas ressalvas). Isso é muito legal para aqueles de nós que confiam nas tuplas de vez em quando. Saiba mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Compreender a estrutura do seu projeto: TS 4.2 inclui uma nova bandeira chamado --explainFiles
, que instrui o TypeScript a gerar informações sobre por que um campo foi incluído em seu programa. Isso é muito útil para solucionar problemas.
Melhorias para verificações de função não solicitadas: TypeScript agora pode detectar mais casos em que as funções não estão sendo chamadas. Por exemplo, ao escrever foo
em vez de foo()
. Mais detalhes e exemplos podem ser encontrados SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Variáveis desestruturadas agora podem ser explicitamente marcadas como não utilizadas: let [_first, second] = getValues();
, o que é incrível; sem mais erros quando noUnusedLocals
está ativado!
Na verdade, há muito mais, como verificações mais rígidas para o in
operador, e algumas mudanças significativas que podem impactar você. Portanto, certifique-se de verificar o notas de lançamento.
Suporte para Webpack 5
Angular 11 nos trouxe suporte experimental para Webpack 5. Com o Angular 12, o suporte Webpack 5 agora está pronto para produção. w00t!
Se você não olhou para Webpack 5, você ficará surpreso. O Webpack 5 foi lançado em outubro de 2020, então é bastante estável agora. Webpack está atualmente em versão 5.37 (lançado há poucos dias).
Aqui está uma breve explicação sobre o que mudou no Webpack 5 e por que estou tão feliz com isso 🤩
Em primeiro lugar, como você sabe, o Webpack é o chave peça do quebra-cabeça Angular CLI e desempenha um grande papel para o tamanho do pacote, desempenho de construção, etc.
Em segundo lugar, o Webpack 5 é um grande lançamento por uma razão. Inclui uma série de mudanças significativas, o que explica por que demorou um pouco para o Angular e um zilhão de utilitários / bibliotecas no ecossistema serem atualizados.
Nas notas de lançamento, a equipe do Webpack indicou que o Webpack 5 se concentra em:
- Melhorar o desempenho de construção com persistente cache
- Melhorar o cache de longo prazo com melhores algoritmos e padrões
- Melhorando o tamanho do pacote com melhor Tree Shaking e geração de código
- Melhorando a compatibilidade com a plataforma da Web
- Limpando estruturas internas
- Apresentando as principais alterações (haha) agora, permitindo que eles permaneçam na v5 pelo maior tempo possível
O recurso mais legal do Webpack 5 é o seu suporte para Federação de Módulo, que fornece as bases necessárias para facilitar o criação de micro front-ends. Está um pouco fora do escopo deste artigo, mas em um instante, a federação de módulo torna possível que diferentes compilações se comportem como um enorme gráfico de módulo conectado e nos permite importar e usar módulos de compilações remotas. Verificação de saída a documentação oficial para saber mais.
Entre as principais mudanças, o Webpack 5 descartou tudo que estava obsoleto (por exemplo, NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), assim como IgnorePlugin
e BannerPlugin
.
Além disso, os polyfills Node.js que foram previamente injetados automaticamente foram removidos; e essa é uma das maiores mudanças nesse lançamento. Esses polyfills permitiram inicialmente que o Webpack nos permitisse usar módulos feitos para Node.js no navegador. Isso era legal, mas tinha uma grande desvantagem: pacotes maiores. Além disso, esses polyfills eram cada vez menos úteis, pois havia alternativas de bibliotecas compatíveis com navegador ou distribuições específicas com suporte para navegador. A partir do Webpack 5, uma vez que esses polyfills não serão mais adicionados automaticamente, podemos nos deparar com algumas surpresas. Por exemplo, nos casos em que usamos módulos feitos para Node.js no navegador sem perceber que anteriormente funcionava graças ao Webpack. Você pode aprender mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Webpack 5 introduziu melhor suporte para cache de longo prazo. No modo de produção, agora inclui novos algoritmos por padrão:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Como o valor indica, esses algoritmos atribuem IDs determinísticos a blocos e módulos, e nomes determinísticos às exportações.
O Webpack 5 é capaz de realizar a agitação da árvore aninhada, rastreando o acesso às propriedades aninhadas das exportações (bem-vindo ao Matrix), o que deve melhorar ainda mais a agitação da árvore. Além disso, agora pode analisar dependências entre as exportações e importações de um módulo. Também há melhorias para Árvore CommonJS tremendo. E há uma tonelada mais otimizações.
Webpack 5 também inclui uma série de mudanças para melhorar a experiência do desenvolvedor. Por exemplo, há um novo algoritmo de id de trecho nomeado que é habilitado por padrão no modo de desenvolvimento. Esse novo algoritmo fornece nomes legíveis por humanos aos pedaços. O target
propriedade também foi amplamente melhorado.
Para ser honesto, não tenho espaço suficiente aqui para cobrir todas as novidades do Webpack 5, lá's apenas por maneira também muito. Então eu vou parar por aqui
Se você só usa o Webpack indiretamente por meio do Angular CLI, a maior parte disso deve ser “transparente” para você. Mas se você estiver usando um construção de Webpack customizada em seu projeto, então você provavelmente deve dar uma olhada no guia de migração.
Finalmente, se você está curioso sobre o que vem a seguir com o Webpack, verifique o roteiro para 2021 E, claro, a últimas notas de lançamento.
O suporte ao IE11 está obsoleto
Por mais triste que possa parecer (quem estou enganando? 😂), o Angular 12 está descontinuando o suporte para o IE11. O Internet Explorer está morto para a maioria de nós, mas, infelizmente, muitas organizações ainda o usam na produção. O suporte ao IE 11 será removido pelo Angular 13, o que significa que essas organizações realmente precisam começar a se afastar do IE (o que é uma coisa boa de qualquer maneira). Sem mais desculpas!
Assim que o suporte ao IE acabar, o Angular será menor, mais rápido e, portanto, melhor para todos nós. Além disso, assim que o fardo de manter a compatibilidade com os navegadores legados acabar (o IE11 é o último!), O Angular será capaz de aproveitar APIs modernas (por exemplo, Variáveis CSS, Observador de intersecção, Grade CSS, Proxies, Animações da web e mais).
Eu realmente não posso esperar para o suporte do IE acabar!
Estrito por padrão
SIM SIM SIM 🤩. A partir do Angular 12, o modo estrito de Angular é habilitado por padrão no CLI. E isso é incrível.
Como você sabe, sou um grande fã do modo estrito do TypeScript, mas também do modo estrito do Angular. Se você quiser saber mais, dê uma olhada o artigo que escrevi ano passado e de Minko Gechev artigo explicando a mudança.
Compilação de produção por padrão
Até agora, executando o ng build
comando criou uma construção de desenvolvimento. A partir do Angular 12, ng build
agora será padronizado para uma construção de produção.
Esperançosamente, ajudará algumas equipes a evitar o erro de construir e implantar compilações de desenvolvimento em ambientes de produção. Embora, temo que as equipes que cometem esse erro ainda terão outros problemas para lidar
Suporte Sass para estilos embutidos
O Angular suporta o Sass há muito tempo, mas, até agora, só podíamos usar o Sass em folhas de estilo externas. Com o Angular 12, agora é possível usar Sass junto com estilos de componentes embutidos (ou seja, dentro do styles
propriedade).
Isso precisa ser habilitado definindo o novo inlineStyleLanguage
propriedade para true
in angular.json
.
Suporte Tailwind
Tailwind agora é oficialmente suportado pelo Angular. Na verdade, o suporte foi introduzido no Angular CLI na v11.2.
Tailwind é ocupado conquistando o mundo, especialmente agora que tem um compilador rad JIT, e é maravilhoso ter suporte integrado para ele no Angular.
Anteriormente, era necessário adicionar o Tailwind a um projeto Angular personalizar a construção do Webpack. Não mais! Agora, adicionar o Tailwind é tão simples quanto instalar o pacote, criando o tailwind.config.js
arquivo usando npx tailwindcss init
, e certificando-se de habilitar Modo JIT do Tailwind.
Melhorias Http
O Angular 12 apresenta uma série de melhorias em seu suporte HTTP.
Metadados para solicitações e interceptores
Em primeiro lugar, o HttpClient
agora pode ser usado para armazenar e recuperar metadados personalizados para solicitações. Isso é particularmente útil para interceptores HTTP. Esse recurso pode ser usado por meio do novo HttpContext
.
Anteriormente, era complicado fornecer contexto aos interceptores, mas agora será muito mais simples. Agora, os diferentes métodos HTTP fornecidos por HttpClient
incluir um novo context: HttpContext
opção, que podemos usar para passar em um mapa.
Netanel basal escreveu um artigo sobre isso, então verifique se você quiser saber mais.
appendAll em HttpParams
A HttpParams
classe agora tem um novo appendAll
método, que pode ser usado para adicionar facilmente um conjunto de parâmetros de uma vez:
appendAll(params: {[param: string]: string|string[]}): HttpParams
Os parâmetros agora podem ser passados como números e booleanos
Anteriormente, números e booleanos não podiam ser usados diretamente como parâmetros HTTP. Tivemos que transformá-los em cordas. Não mais!
CódigoHttpStatus
O Angular introduziu sua própria lista de nomes legíveis por humanos para códigos de status HTTP, na forma de um enum const.
Anteriormente, tínhamos que apresentar nossa própria solução se quiséssemos ter nomes legíveis por humanos. Graças a este novo recurso, agora podemos usar HttpStatusCode
.
Por exemplo:
if (response.status === HttpStatusCode.Ok) { ...
}
Para aqueles que usam TypeScript tanto no back-end quanto no front-end, isso não é muito útil (já que provavelmente todos nós já temos nossa própria abstração), mas se o seu projeto só usa TypeScript / Angular no front-end, então é uma boa melhoria.
Fábrica Xhr
A XhrFactory
classe foi movida para um pacote diferente. Agora é exposto por angular/common
em vez de angular/common/http
.
Observe que uma migração foi incluída na atualização, então você nem perceberá se executar ng update
Mudanças de roteador
O roteador Angular mudou um pouco no Angular 12.
Em primeiro lugar, o routerLinkActiveOptions
diretiva foi aprimorada. Agora, é possível especificar se exigimos uma correspondência exata ou não para diferentes partes do URL para adicionar uma classe CSS a um link.
Anteriormente, só podíamos exigir uma correspondência exata (ou não) para todo o URL:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Agora, podemos fornecer regras de correspondência refinadas para caminhos, parâmetros de consulta, parâmetros de matriz e fragmentos.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
Os valores suportados são exact
, ignored
e subset
, que pode ser usado para queryParams
e matrixParams
. Para caminhos, você pode passar exact
or subset
e exact
or ignored
para o fragment
.
Observe que o isActive
O método do roteador também aceita essas novas opções.
fragmento é anulável
Até agora, ActivatedRouteSnapshot.fragment
não era anulável. Isso mudou com o Angular 12. Não se preocupe muito; ng update
você tem coberto.
Formulários
Mais controle sobre os eventos emitidos
A emitEvent
opção foi adicionada a vários métodos de FormGroup
e FormArray
. Graças a esta mudança, agora será possível controlar se os eventos precisam ser emitidos ou não em mais casos.
Por exemplo, anteriormente, quando um controle foi removido usando o removeControl
método de FormGroup
, então um evento sempre foi emitido. Com essa mudança, agora seremos capazes de evitar esses problemas.
A emitEvent
opção foi adicionada aos seguintes métodos de FormGroup
:
addControl
removeControl
setControl
E para os seguintes métodos de FormArray
:
push
insert
removeAt
setControl
clear
Suporte de validadores mínimo e máximo para formulários baseados em modelos
A min
e max
validadores do Angular agora podem ser usados com formulários baseados em modelos:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Observe que esta é uma alteração significativa, uma vez que seriam anteriormente ignoradas.
I18n
O sistema i18n do Angular mudou com este lançamento.
Conforme apontado na postagem do blog de anúncio, atualmente existem vários formatos de id de mensagem herdados sendo usados. Esses são frágeis e podem surgir problemas devido a espaços em branco, modelos de formatação e expressões ICU.
O Angular 12 apresenta um novo formato de identificação de mensagem canônica (ou seja, um formato para controlar todos). Este formato é mais resiliente e intuitivo.
Esse formato reduzirá a invalidação de tradução desnecessária e o custo de retradução associado em aplicativos onde as traduções não correspondem devido a alterações de espaço em branco, por exemplo.
Desde a v11, novos projetos são configurados automaticamente para usar os novos ids de mensagem e agora existem ferramentas para migrar projetos existentes com traduções existentes. Se você estiver preocupado, pode usar o localize-migrate
ferramenta para migrar seus ids de mensagem:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
Você pode encontrar mais informações SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Melhorias de desempenho
Com esta versão, há uma série de melhorias de desempenho. O mais óbvio vem com a atualização para o Webpack 5, mas há mais:
Vários métodos não utilizados foram removidos do DomAdapter
. É legal porque seus métodos não podem ser abalados por árvores e foram incluídos em todos os aplicativos angulares, conforme explicado no PR correspondente.
O Angular agora gera menos código para acesso seguro à propriedade; por exemplo, para expressões de modelo como a?.b
e a coalescência nula recentemente suportada: a ?? b
.
O compilador Angular agora oferece suporte à compilação incremental, mesmo na presença de arquivos de origem redirecionados. Anteriormente, o trabalho da compilação anterior não podia ser reutilizado quando o TypeScript desduplicava os arquivos de origem. Você pode ler mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
O compilador Angular agora armazena em cache o caminho do sistema de arquivos dos arquivos de origem. Anteriormente, chamava repetidamente fs.resolve()
, o que é demorado.
A getDirectives
função foi melhorada. Junto com essa mudança, o ng
namespace também foi expandido para incluir um novo getDirectiveMetadata
utilidade.
E tem um pouco mais.
melhorias de API ng
A ng
API de depuração que podemos usar nas ferramentas de desenvolvimento do navegador foi aprimorado com o Angular 12.
Há uma nova função chamada getDirectiveMetadata
, que pode ser usado para recuperar informações sobre componentes e diretivas. Não acho que precisaremos disso com frequência, mas as melhorias futuras nas ferramentas de desenvolvimento provavelmente dependerão disso. Você pode descobrir mais aqui.
Uma nova função de profiler chamada esetProfiler
também foi implementado e também está disponível no modo de produção. Essa nova função pode ser chamada em vários cenários. Por exemplo, ele pode ser usado para rastrear durações de criação de modelo, atualizações de modelo, processamento de ganchos de ciclo de vida, etc. Novamente, esta API será aproveitada pelas próximas ferramentas de desenvolvimento, dando-nos muito mais informações perspicazes sobre como nossos aplicativos estão executando tempo de execução.
Isso ainda é experimental neste momento, mas acho que ouviremos mais sobre isso mais tarde. Estou curioso para ver se / quando ferramentas como o Sentry integrarão o suporte para coletar esse tipo de informação a fim de nos fornecer painéis de desempenho úteis.
Poucos dias após o lançamento do Angular 12, a equipe Angular anunciou a disponibilidade de novas ferramentas Angular Dev para Google Chrome. Você pode baixar aqueles SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Usando essa nova extensão de navegador, você pode inspecionar facilmente seus aplicativos Angular durante o desenvolvimento. Suporta:
- Visualizando a estrutura do aplicativo (ou seja, inspecionando a árvore de componentes)
- Explorando e editando componentes
- Perfis de desempenho
Usando o criador de perfil embutido, podemos registrar eventos de detecção de alterações e visualizá-los à medida que ocorrem. Para cada ciclo de detecção de mudança, podemos ver quanto tempo levou, quais componentes demoraram mais, se esse ciclo causou quedas de quadros.
Anteriormente, a Angular tinha ferramentas de desenvolvimento semi-oficiais por meio do Augúrio (que são a base das novas ferramentas!), mas não eram compatíveis com Ivy. Portanto, esta é uma ótima notícia para a comunidade Angular!
E mais…
Há uma tonelada a mais pequenas alterações neste lançamento. Aqui está uma visão geral rápida.
APP_INITIALIZER agora suporta observáveis
Até agora, não era possível usar Observáveis com APP_INITIALIZER
. A partir do Angular 12, agora podemos fazer isso, o que permitirá um código mais limpo!
Caso você ainda não conheça esse recurso do Angular, APP_INITIALIZER
is um token que podemos usar para definir funções que precisam ser executadas durante a inicialização do aplicativo. Se essa função for assíncrona, retornando um Promise
ou um Observable
(novo: p), o Angular espera que ele seja concluído antes de iniciar o aplicativo.
Essa mudança é mais do que bem-vinda, pois significa que podemos escrever ainda mais código usando RxJS, em vez de ter que "retroceder" para o Promise
API.
Você pode ler mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Controle de tempo de execução sobre animações
Anteriormente, a única maneira de desativar as animações era fornecer o NoopAnimationsModule
. A partir do Angular 12, agora é possível desativar animações com base nas informações de tempo de execução, usando BrowserAnimationModule.withConfig
método, e passando-o pelo disableAnimations
propriedade booleana.
Novo método historyGo no serviço de localização
A LocationService
do Angular agora inclui um historyGo
método, que pode ser usado para navegar em direção a uma página específica no histórico da sessão, identificada por sua posição relativa à página atual. Este método corresponde ao nativo window.history.go
método. Confira MDN para alguns exemplos.
Melhorias no serviço de linguagem
O serviço de linguagem, que fornece aos IDEs todos os insights úteis sobre o código Angular, também foi aprimorado com esta versão.
Com o Angular 12, o serviço de idioma é habilitado por padrão (anteriormente, era necessário aceitar).
A partir do Angular 12, ele também detectará se verificação estrita do tipo de modelo não está habilitado, e irá aconselhá-lo a habilitar aqueles.
O serviço de idioma agora também inclui recursos de rastreamento de desempenho, que podem ser usados para rastrear desempenhos. Isso pode ser habilitado no VSCode, como explicado aqui (embora este seja um nível bastante baixo).
Se você ainda não conhece o serviço linguístico, dê uma olhada os documentos oficiais, ou a bela postagem de blog escrita por Esquadrão Ninja, ou isto vídeo de introdução.
Desative as regras do lint diretamente dos modelos HTML
O compilador de modelo Angular agora controla os comentários HTML.
Anteriormente, não era possível desativar as regras de linter dos modelos HTML porque o compilador do modelo Angular ignorava os comentários. A solução alternativa foi desativar essas regras para todo o modelo do controlador do componente. Graças a essa mudança, agora será possível fazer isso com mais precisão a partir do modelo:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Oba para um código mais limpo!
O DatePipe agora suporta dias da semana autônomo padrão ICU
Anteriormente, não foi possível para formatar uma data para dia independente da semana usando o DatePipe.
Graças a essa mudança, a formatação de data finlandesa agora é suportada e tenho certeza que é uma ótima notícia para uma fração da comunidade Angular ular
Suporte para forwardRef em campos fornecidos em decoradores injetáveis
Agora é possível usar forwardRef
dentro do providedIn
campo do @Injectable
decorador.
Novo gancho transformResource na interface ResourceHost
A transformResource
método foi adicionado ao ResourceHost
interface. Graças a isso, agora é possível que as ferramentas façam coisas como introduzir o suporte ao pré-processador para estilos embutidos. Isso é o que habilita o novo suporte para SASS com estilos embutidos.
Você pode aprender mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA e SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Possível criar implementações de tomada de roteador personalizadas
Até agora, a criação de saídas de roteador personalizadas era possível, mas exigia pular alguns obstáculos (ou seja, registrar saídas personalizadas com ChildrenOutletContexts
).
Angular 12 fornece um suporte mais limpo para roteadores personalizados.
Correções de bugs
Como de costume, há zilhões de correções de bugs incluídos nesta versão.
Aqui está uma cópia das notas de lançamento:
- animações: garantir ordenação de namespace de transição consistente (#19854) (01cc995)
- animações: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (e918250)
- animações: limpar os elementos DOM quando a visualização raiz for removida (#41059) (c49b280)
- animações: permitir animações em elementos no DOM sombra (#40134) (pai42c8), fecha #25672
- animações: limpar os elementos DOM quando a visualização raiz for removida (#41001) (a31da48)
- Bazel: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (8503246)
- Bazel: atualize o conjunto de ferramentas para as últimas mudanças em rules_nodejs (#40710) (696f7bc)
- Bazel: atualizar teste de integração para usar regras_nodejs@3.1.0 (#40710) (34 de 89a)
- Bazel: atualizar castings de tipo para uso JSON.parse (#40710) (2c90391)
- supino: atualizar castings de tipo para uso JSON.parse (#40710) (e721a5d)
- comum: adicione ContentType correto para valores booleanos com corpo de solicitação HttpClient (#38924) (#41885) (922a602)
- comum: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (f2b6fd8)
- comum: scroller da janela de visualização não encontrou elementos dentro do DOM sombra (#41644) (c0f5ba3), fecha #41470
- comum: reexportar temporariamente e descontinuar
XhrFactory
(#41393) (7dfa446) - comum: limpar ouvintes de mudança de localização quando a visão raiz é removida (#40867) (38524c4), fecha #31546
- comum: permitir número ou booleano como parâmetros http (#40663) (91cdc11), fecha #23856
- comum: evite a mutação do objeto de contexto em NgTemplateOutlet (#40360) (d3705b3), fecha #24515
- compilador: preservar as regras @page em estilos encapsulados (#41915) (3e365ba), fecha #26269
- compilador: retirar seletores com escopo de
@font-face
as regras (#41815) (2a11cda), fecha #41751 - compilador: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (bae8126)
- compilador: modelos inline não literais processados incorretamente na compilação parcial (#41583) (ab257b3)
- compilador: não gerando instruções de atualização para ng-template dentro de namespaces alternativos (#41669) (2bcbbda), fecha #41308
- compilador: evite analisar EmptyExpr com um intervalo para trás (#41581) (e1a2930)
- compilador: lidar com propriedades personalizadas CSS que diferenciam maiúsculas de minúsculas (#41380) (e112e32), fecha #41364
- compilador: incluem componentes usados durante a compilação JIT da declaração de componente parcial (#41353) (ff9470b), fecha #41104 #41318
- compilador: suporte múltiplo
:host-context()
seletores (#40494) (07b7af3), fecha #19199 - compilador: atualizar castings de tipo para uso JSON.parse (#40710) (f728490)
- compilador-cli: use ”para o URL do mapa de origem de modelos indiretos (#41973) (7a4d980), fecha #40854
- compilador-cli: expor o linker como um plugin Babel (#41918) (8fdac8f)
- compilador-cli: prefira exportações sem alias em emissores de referência (#41866) (75bb931), fecha #41443 #41277
- compilador-cli: permitir que o vinculador processe booleanos minimizados (#41747) (1fb6724), fecha #41655
- compilador-cli: corresponder declarações parciais indexadas de string (#41747) (f885750), fecha #41655
- compilador-cli: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (5b463f4)
- compilador-cli: tipos literais de preenchimento automático em modelos. (#41456) (#41645) (8b2b5ef)
- compilador-cli: não errar com o pré-processamento se o componente não tiver estilos embutidos (#41602) (a5fe8b9)
- compilador-cli: garantir as faixas do compilador
ts.Program
s corretamente (#41291) (desacc74) - compilador-cli: evita a omissão de importações padrão em recompilações incrementais (#41557) (7f16515), fecha #41377
- compilador-cli: resolver
rootDirs
para absoluto (#41359) (3e0fda9), fecha #36290 - compilador-cli: adicionar
useInlining
opção para digitar check config (#41043) (09aefd2), fecha #40963 - compilador-cli:
readConfiguration
as opções existentes devem substituir as opções em tsconfig (#40694) (b7c4d07) - compilador-cli: estender
angularCompilerOptions
no tsconfig do nó (#40694) (5eb1954), fecha #36715 - compilador-cli: atualizar os testes de integração do ngcc para as últimas mudanças em rules_nodejs (#40710) (d7f5755)
- compilador-cli: atualizar castings de tipo para uso JSON.parse (#40710) (b75d7cb)
- testemunho: não retém componentes e módulos compilados dinamicamente (#42003) (1449c5c), fecha #19997
- testemunho: invocar o profiler em torno dos ganchos do ciclo de vida ngOnDestroy (#41969) (e9ddc57)
- testemunho: AsyncPipe agora é compatível com RxJS 7 (#41590) (9759 AC)
- testemunho: lidar com vários atributos i18n com ligações de expressão (#41882) (73c6c64), fecha #41869
- testemunho: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (f9c1f08)
- testemunho: detectar construtores sintetizados que foram reduzidos usando TS 4.2 (#41305) (274dc15), fecha #41298
- testemunho: Interruptor
emitDistinctChangesOnlyDefaultValue
para verdadeiro (#41121) (7096246) - testemunho: remover constante EMPTY_OBJ duplicada (#41066) (bf158e7)
- testemunho: remover a constante EMPTY_ARRAY duplicada (#40991) (e12d9de)
- testemunho: permitir que o contexto EmbeddedViewRef seja atualizado (#40360) (a3e1719), fecha #24515
- testemunho: fazer DefaultIterableDiffer manter a ordem das duplicatas (#23941) (a826926), fecha #23815
- testemunho: As opções de coalescência NgZone devem acionar onStable corretamente (#40540) (22f9e45)
- elementos: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (4f5d094)
- elementos: atualizar castings de tipo para uso JSON.parse (#40710) (efd4149)
- formulários: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (dc975ba)
- http: complete a solicitação no tempo limite (#39807) (61a0b6d), fecha #26453
- http: emitir erro no evento de aborto XMLHttpRequest (#40767) (3897265), fecha #22324
- serviço de linguagem: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (9b6198c)
- serviço de linguagem: use versões de script para compilações incrementais (#41475) (78236bf)
- serviço de linguagem: Fornece apenas conclusões de propriedade Angular em modelos (#41278) (0226a11)
- serviço de linguagem: Adicionar opção de plugin para forçar strictTemplates (#41062) (e9e7c33)
- serviço de linguagem: use um único ponto de entrada para Ivy e View Engine (#40967) (e986a97)
- localizar: relaxe o erro para advertir por falta de alvo (#41944) (35ceed2), fecha #21690
- localizar: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (658ed1f)
- localizar: atualizar castings de tipo para uso JSON.parse (#40710) (4b469c9)
- ngcc: detectar construtores sintetizados que foram reduzidos usando TS 4.2 (#41305) (8d3da56), fecha #41298
- navegador de plataforma: evitar vazamento de memória de nós de estilo se o encapsulamento DOM sombra for usado (#42005) (d555555), fecha #36655
- navegador de plataforma: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (ea05cfd)
- navegador de plataforma: configurar
XhrFactory
usarBrowserXhr
(#41313) (e0028e5), fecha #41311 - navegador de plataforma: atualizar castings de tipo para uso JSON.parse (#40710) (7ecfd2d)
- plataforma-navegador-dinâmico: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (bc45029)
- servidor de plataforma: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (4b9d4fa)
- roteador: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (0067ª edição)
- roteador: Apenas recupere a rota armazenada quando a estratégia de reutilização indicar que ela deve ser reconectada (#30263) (a4ff071), fecha #23162
- roteador: mesclar recursivamente correspondências de caminho vazio (#41584) (1179dc8), fecha #41481
- roteador: fragmento pode ser nulo (#37336) (b555160), fecha #23894 #34197
- roteador: atualizar castings de tipo para uso JSON.parse (#40710) (350 dado)
- trabalhador de serviço: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (6b823d7)
- trabalhador de serviço: atualizar castings de tipo para uso JSON.parse (#40710) (4f7ff96)
- atualizar: preserve $ interval.flush quando ngMocks estiver sendo usado (#30229) (87dc851)
- atualizar: atualizar o intervalo de versões de nó com suporte para incluir apenas versões LTS (#41822) (10c4523)
A propósito, você notou que AsyncPipe
foi corrigido por Ben Lesh para ser compatível com RxJS 6 e 7? Quão legal é isso?
Quebrando mudanças
Como de costume, há uma série de mudanças importantes nesta versão.
As as notas de lançamento oficiais são bem claros, estou apenas copiando / colando aqui:
- Os pacotes UMD minimizados não estão mais incluídos nos pacotes NPM distribuídos.
- animações: Os elementos DOM agora são removidos corretamente quando a visualização raiz é removida. Se você estiver usando SSR e usar o HTML do aplicativo para renderização, precisará garantir que salvou o HTML em uma variável antes de destruir o aplicativo. Também é possível que os testes estejam acidentalmente contando com o comportamento antigo ao tentar encontrar um elemento que não foi removido em um teste anterior. Se for esse o caso, os testes com falha devem ser atualizados para garantir que eles tenham o código de configuração adequado que inicializa os elementos nos quais eles dependem
- comum: Métodos do
PlatformLocation
classe, a saberonPopState
eonHashChange
, costumava retornarvoid
. Agora, esses métodos retornam funções que podem ser chamadas para remover manipuladores de eventos - comum: os métodos do
HttpParams
classe agora aceitastring | number | boolean
em vez destring
para o valor de um parâmetro. Se você estendeu esta classe em seu aplicativo, você terá que atualizar as assinaturas de seus métodos para refletir essas mudanças - compilador-cli: Bibliotecas vinculadas não geram mais ids de mensagens i18n legadas. Qualquer aplicativo downstream que forneça traduções para essas mensagens, precisará migrar seus ids de mensagem usando o
localize-migrate
ferramenta de linha de comando - core: O Angular não mantém mais o suporte para o node v10, então se você ainda estiver usando para o seu ambiente de desenvolvimento, é hora de atualizar!
- core: Anteriormente, o
ng.getDirectives
função gerava um erro no caso de um determinado nó DOM não ter nenhum contexto Angular associado a ele (por exemplo, se uma função foi chamada para um elemento DOM fora de um aplicativo Angular). Este comportamento era inconsistente com outros utilitários de depuração emng
namespace, que tratou dessa situação sem levantar uma exceção. Agora chamando ong.getDirectives
função para esses nós DOM resultaria em uma matriz vazia retornada desse núcleo de função: Padrão de alternância deemitDistinctChangesOnlyDefaultValue
que muda o comportamento padrão e pode fazer com que alguns aplicativos que dependem do comportamento incorreto falhem
emitDistinctChangesOnly
sinalizador também foi descontinuado e será removido em uma versão principal futura
A implementação anterior dispararia mudanças QueryList.changes.subscribe
sempre que QueryList
foi recalculado. Isso resultou em um número artificialmente alto de notificações de alteração, pois é possível que o recálculo QueryList
resulta na mesma lista. Quando o QueryList
é recalculado é um detalhe de implementação e não deve ser o que determina com que frequência o evento de alteração deve ser acionado.
Infelizmente, corrigir o comportamento imediatamente causou a falha de muitos aplicativos existentes. Por esse motivo, a Angular considera essa correção uma correção de quebra e introduziu um sinalizador em @ContentChildren
e @ViewChildren
, que controla o comportamento.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
Para compatibilidade com versões anteriores antes da v12emitDistinctChangesOnlyDefaultValue
foi definido para false
. Esta mudança
muda o padrão para true
.
- testemunho: O tipo de
APP_INITIALIZER
token foi alterado para refletir com mais precisão os tipos de valores de retorno que são tratados pelo Angular. Anteriormente, cada retorno de chamada do inicializador era digitado para retornarany
, isto é agoraPromise<unknown> | Observable<unknown> | void
. No caso improvável de seu aplicativo usar oInjector.get
orTestBed.inject
API para injetar oAPP_INITIALIZER
token, pode ser necessário atualizar o código para considerar o tipo mais restrito.
Além disso, o TypeScript pode relatar o erro TS2742 se o APP_INITIALIZER
token é usado em uma expressão cujo tipo inferido deve ser emitido em um arquivo .d.ts. Para contornar isso, uma anotação de tipo explícita é necessária, que normalmente seria Provider
or Provider[]
.
-
testemunho: Mínimo suportado
zone.js
versão é0.11.4
. Portanto, isso significa que se você estiver usando uma versão mais antiga, também é hora de atualizar o zone.js em seu projeto! -
formulários: A
emitEvent
opção foi adicionada ao seguinteFormArray
eFormGroup
métodos: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.inserir
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
Se seu aplicativo tem classes personalizadas que estendem FormArray
or FormGroup
classes e substituir o
métodos mencionados acima, você pode precisar atualizar sua implementação para ter as novas opções em
conta e certifique-se de que as substituições são compatíveis do ponto de vista de tipos.
- formulários: Anteriormente
min
emax
atributos definidos no<input type="number">
foram ignorados pelo módulo Formulários. Agora, a presença desses atributos seria
acionar a lógica de validação mín. / máx. (no casoformControl
,formControlName
orngModel
diretivas também estão presentes em uma determinada entrada) e
o status de controle de formulário correspondente refletiria isso. - navegador de plataforma:
XhrFactory
foi movido de@angular/common/http
para@angular/common
.
Antes
import { XhrFactory } from '@angular/common/http';
Depois de
import { XhrFactory } from '@angular/common';
- roteador: As verificações de nulos estritas informarão sobre o fragmento potencialmente nulo.
Caminho de migração: adicionar verificação de nulo. - roteador: O tipo de
RouterLinkActive.routerLinkActiveOptions
entrada foi
expandido para permitir um controle mais ajustado. Código que leu anteriormente
essa propriedade pode precisar ser atualizada para levar em conta o novo tipo.
Roteiro atualizado
De acordo com o atual Angular roadmap, a equipe agora está ocupada com as seguintes melhorias:
- Melhorar a experiência do desenvolvedor durante a depuração e criação de perfil. Isso deve nos ajudar a entender a estrutura do componente (imagino que as ferramentas de desenvolvimento do React permitem o React) e a detecção de alterações
- Melhorar os tempos de teste e depuração com desmontagem automática: Isso deve melhorar o isolamento entre os testes e os tempos de teste. O Cama de teste também será alterado para limpar e destruir automaticamente o ambiente de teste após cada teste ser executado
- Usando ES2017 + como saída padrão: eles identificarão obstáculos e os removerão para que o idioma de saída padrão possa ser atualizado
- Integrando MDC Web em Material Angular
- Melhorando a acessibilidade de componentes de Material Angular
- Publicação de guias sobre conceitos avançados, como detecção de alterações, perfis de desempenho, interações com Zone.js, etc.
- Atualizando a estratégia de teste e2e (cfr acima)
- Preparando a atualização para RxJS v7 +. Como você deve saber, RxJS 7 foi lançado recentemente. Esperamos que em breve possamos atualizar
No futuro, a equipe Angular planeja:
- Analise a arquitetura de micro front-end: eles podem apresentar meios para criarmos facilmente micro-front-ends usando o Angular
- Melhore a experiência do desenvolvedor com digitação estrita para formulários angulares (precisamos disso desesperadamente)
- Torne o Zone.js opcional, o que deve simplificar a estrutura, melhorar a depuração, reduzir os tamanhos dos pacotes e até mesmo permitir o aproveitamento da sintaxe nativa async / await
- Melhore o desempenho de compilação integrando o compilador Angular (
ngc
) como um plug-in de compilador TypeScript - Permite adicionar diretivas aos elementos do host. Isso também é solicitado pela comunidade há muito tempo!
- Torne o NgModules opcional para facilitar a curva de aprendizado
- Fornece-nos meios mais fáceis de implementar a divisão de código no nível do componente
Material Angular e CDK Angular
Migração Sass
Internamente, tanto o Angular Material quanto o CDK migraram para o novo sistema de módulo Sass.
Se o seu aplicativo usa qualquer um deles, você precisará certificar-se de que substituiu node-sass
by sass
: https://www.npmjs.com/package/sass. O node-sass
o pacote não é mais mantido!
Com essa migração, a API de temas do Sass foi aprimorada e agora nos permite aproveitar as vantagens do @use
utilidade.
Agora existe um único ponto de entrada para @angular/material
e @angular/cdk
.
Finalmente, as APIs também foram alteradas para maior clareza. Muitas funções, mixins e variáveis foram renomeadas ao longo do caminho.
Você pode encontrar mais informações sobre essas mudanças no novo guia de temas: https://github.com/angular/components/blob/master/guides/theming.md. Além disso, observe que os guias em https://material.angular.io foram reescritos para mostrar a nova API e incluir explicações.
O processo de atualização migrará automaticamente o código para a nova API Sass. Você pode encontrar exemplos antes / depois SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
Mudanças angulares de CDK
A versão 12 inclui vários alterar para o CDK Angular.
Aqui, listarei apenas os novos recursos, mas você pode verificar as notas de versão se quiser detalhes sobre as correções de bugs e melhorias de desempenho:
- Arraste e solte: O evento descartado agora inclui um
dropPoint
, determinando o ponto exato para onde o mouse apontou quando o item foi solto. Mais informações SUA PARTICIPAÇÃO FAZ A DIFERENÇA - Arraste e solte: O contêiner de visualização agora pode ser personalizado
- mesa: Uma nova diretriz permite habilitar o repetidor de visualização de reciclagem, que armazena em cache as linhas descartadas e as reutiliza quando o conjunto de dados muda. Isso pode ajudar a melhorar o desempenho (reduzir a latência)
- mesa: Adicionado os deslocamentos de elementos pegajosos para o
StickyUpdate
interface - Stepper: Quando um usuário tenta se afastar de uma etapa, um
interacted
o evento agora será emitido - Stepper: A orientação agora pode ser mudado
- Acessibilidade: UMA
FocusOptions
objeto agora pode ser passado nos vários métodos de armadilha de foco - ensaio: Novo ambiente de chicote WebDriver. Eu não mergulhei neste ainda, então não posso te contar mais. Verificação de saída o PR
Mudanças angulares de material
Há também uma série de mudanças para material angular. Mais uma vez, verifique as notas de lançamento para obter a lista completa de correções de bugs.
Novos recursos:
- Selecionador de data: Não depende mais no diálogo
- Stepper: A orientação agora pode ser alterada dinamicamente (cfr mudança semelhante no CDK)
- Stepper: Permitir que o conteúdo seja renderizado preguiçosamente
- Menu: Permite atualizar a posição do menu programaticamente
- Erro de tapete: Agora usa
aria-live="polite"
em vez derole="alert"
. Mais detalhes SUA PARTICIPAÇÃO FAZ A DIFERENÇA - Tabs: Adicionar método a definir programaticamente o foco em uma guia específica
- Lista: Agora retorna uma matriz com opções alteradas do
selectAll
edeselectAll
métodos. Verificação de saída o PR para detalhes - Botão deslizante: Permitir para configurar globalmente uma cor padrão através de um provedor
- tooltip: Agora expõe a posição efetiva da dica de ferramenta por meio de uma classe no componente
- Rádio, Caixa de seleção e Slider: Inclua a cor de fundo desses componentes no imprimir folhas de estilo
Também há uma série de mudanças na versão experimental: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Angular universal
Angular Universal 12 também é Fresco fora do forno.
Com este lançamento, a Universal agora incorpora CSS crítico por padrãoo que é muito legal.
Universal agora inclui um novo proxyConfig
opção de fornecer configurações de proxy personalizadas para o ssr-dev-server
construtor.
Nesta versão, há um novo mecanismo SSR (experimental) chamado Trevo (me lembra de uma ferramenta de qualidade no ecossistema Java). Este novo motor parece promissor. Tem como objetivo simplificar as coisas, nos livrar do Window is undefined
erro, remova a necessidade de várias compilações para SSR / pré-renderização, gere shells de aplicativo sem uma compilação extra e muito mais. Provavelmente ouviremos mais sobre isso mais tarde. Se você está curioso, verifique o PR.
Esta versão inclui um construtor que pode ser usado para gerar páginas estáticas (ou seja, pré-renderização) usando a nova abordagem Universal Clover.
Finalmente, esta versão também inclui Suporte TLS para o dev-server.
Google Maps
Como você sabe, o Angular inclui componentes para Google Maps e Youtube. A versão 12 traz algumas melhorias para o componente Google Maps:
- Agora inclui um
icon
entrada para personalizar facilmente o marcador - Agora emite um
clusterClick
evento quando um cluster foi clicado - Inclui um invólucro em torno da API Geocoder do Google Maps e exportações
MapDirectionsResponse
, que não foi exposto antes - Apresenta suporte para renderizando mapas de calor
- Adicionado
MapDirectionsRenderer
, permitindo renderizar direções em um mapa, eMapDirectionsService
, que envolvegoogle.maps.DirectionsService
para calcular rotas entre dois pontos. - Novo
options
entrada no clusterizador de marcadores, semelhante às outras diretivas.
Melhoramento
Como de costume, há um guia de atualização completo disponível e ng update
irá ajudá-lo: https://update.angular.io/?l=3&v=11.0-12.0
Se você estiver usando Nrwl NX (você realmente deveria), observe que o Nx 12.3 já inclui suporte para Angular 12! Saiba mais sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA. Como um benefício adicional, o Nx também o ajudará a migrar de TSLint para ESLint (e está na hora!)
Conclusão
Neste artigo, explorei os novos recursos do Angular 12.
Como de costume, este é o lançamento é heróico (o que mais poderia ser ?! 😎).
Ivy está avançando e, com sorte, "em breve" ficaremos menos incomodados com ngcc
, conforme o ecossistema migra. Há uma série de mudanças impressionantes neste lançamento, então verifique e atualize agora !.
Por hoje é isso!
PS: Se você quiser aprender muitas outras coisas legais sobre produto / software / desenvolvimento da Web, confira o Conceitos de desenvolvimento série, (https://mailchi.mp/fb661753d54a/developassion-newsletter)[subscribe to my newsletter], e venha dizer oi no twitter!
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
- Fonte: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- Capaz
- Sobre
- sobre isso
- acima
- absoluto
- ACEITAR
- Aceita
- Acesso
- acessibilidade
- Conta
- exatamente
- adicionado
- Adição
- avançado
- Vantagem
- Depois de
- visa
- Alertar
- algoritmo
- algoritmos
- Todos os Produtos
- Permitindo
- permite
- sozinho
- já
- alternativa
- alternativas
- Apesar
- sempre
- entre
- e
- Angular
- animações
- anunciou
- Anúncio
- Outro
- qualquer lugar
- api
- APIs
- app
- aparecer
- Aplicação
- aplicações
- abordagem
- Abril
- arquitetura
- por aí
- Ordem
- artigo
- artigos
- associado
- atributos
- autores
- Automático
- automaticamente
- disponibilidade
- disponível
- Babel
- em caminho duplo
- Back-end
- fundo
- Barra
- baseado
- base
- Porque
- antes
- ser
- beneficiar
- Melhor
- entre
- Grande
- O maior
- Pouco
- Blog
- interesse?
- Novo
- Quebra
- Traz
- Trazido
- navegador
- navegadores
- Bug
- construir
- construtor
- Prédio
- Constrói
- construídas em
- Pacote
- carga
- chamado
- chamada
- capacidades
- casas
- casos
- Causar
- causado
- alterar
- Alterações
- verificar
- Cheques
- Chrome
- clareza
- classe
- aulas
- remover filtragem
- claramente
- Fecha
- Agrupar
- código
- Coleta
- cor
- vinda
- comentários
- comunidade
- compatibilidade
- compatível
- completar
- complicado
- componente
- componentes
- conceitos
- preocupado
- conclusão
- conectado
- considera
- consistente
- constante
- consumir
- Recipiente
- conteúdo
- contexto
- continuar
- ao controle
- controlador
- controles
- Legal
- núcleo
- corresponde
- Custo
- poderia
- curso
- cobrir
- coberto
- crio
- criado
- Criar
- criação
- crítico
- navegador cruzado
- crucial
- APF
- curioso
- Atual
- Atualmente
- personalizadas
- propriedades personalizadas
- personalizar
- Data
- dia
- dias
- morto
- acordo
- mais profunda
- Padrão
- depende
- Implantação
- profundidade
- detalhe
- detalhes
- Detecção
- determina
- determinando
- Dev
- Developer
- Desenvolvimento
- DID
- diferente
- DIG
- directivas
- diretamente
- distribuído
- distribuições
- fazer
- DOM
- down
- download
- desvantagem
- desistiu
- Drops
- duplicatas
- durante
- cada
- mais fácil
- facilmente
- ecossistema
- Eficaz
- esforço
- ou
- elementos
- incorporado
- permitir
- permite
- encapsulado
- end-to-end
- energia
- Motor
- aprimorada
- suficiente
- garantir
- entrada
- Meio Ambiente
- ambientes
- erro
- erros
- especialmente
- etc.
- Éter (ETH)
- avaliar
- Mesmo
- Evento
- eventos
- todos
- tudo
- evoluiu
- evolução
- exemplo
- exemplos
- excelente
- exceção
- executar
- execução
- existente
- expandido
- esperado
- vasta experiência
- Explicação
- explicado
- explicando
- Explica
- explicação
- Explorado
- explorador
- exportações
- exposto
- expressões
- estender
- extensão
- externo
- extra
- facilitar
- FALHA
- bastante
- Cair
- ventilador
- RÁPIDO
- mais rápido
- medo
- Característica
- Funcionalidades
- Federação
- retornos
- poucos
- campo
- Campos
- Envie o
- Arquivos
- Finalmente
- Encontre
- descoberta
- Fogo
- Fixar
- fluxo
- Foco
- concentra-se
- seguinte
- força
- formulário
- formato
- formas
- para a frente
- encontrado
- Fundações
- fração
- QUADRO
- Quadro
- da
- Frontend
- cheio
- função
- funções
- mais distante
- futuro
- gerar
- gera
- gerando
- ter
- GitHub
- OFERTE
- dado
- dá
- Dando
- Go
- vai
- Bom estado, com sinais de uso
- Google Chrome
- Google Maps
- gráfico
- ótimo
- guia
- Guias
- manipular
- Queijos duros
- ter
- ouviu
- ajudar
- SUA PARTICIPAÇÃO FAZ A DIFERENÇA
- hi
- Alta
- Destaques
- história
- Hooks
- Esperançosamente
- hospedeiro
- Como funciona o dobrador de carta de canal
- HTML
- HTTPS
- enorme
- legível para humanos
- EU VOU
- idéia
- identificado
- identificar
- Impacto
- executar
- implementação
- implementado
- importar
- importante
- importações
- melhorar
- melhorado
- melhoria
- melhorias
- in
- incluir
- incluído
- inclui
- incorretamente
- indicam
- indiretamente
- info
- INFORMAÇÕES
- inicialmente
- inovadores
- entrada
- insights
- instalar
- instalando
- instância
- em vez disso
- instruções
- integrar
- Integração
- integração
- interações
- interessante
- Interface
- interno
- Internet
- introduzir
- introduzido
- Introduz
- introduzindo
- intuitivo
- investido
- isolamento
- questões
- IT
- Java
- JIT
- Trabalho
- juntar
- json
- Guarda
- Tipo
- Saber
- língua
- Maior
- Sobrenome
- Latência
- mais recente
- Liga
- vazar
- APRENDER
- aprendizagem
- Legado
- Nível
- Alavancagem
- bibliotecas
- Biblioteca
- Line
- LINK
- ligado
- Lista
- localização
- longo
- muito tempo
- longo prazo
- mais
- olhar
- olhou
- procurando
- lote
- Baixo
- moldadas
- a manter
- mantém
- principal
- Maioria
- fazer
- FAZ
- Fazendo
- muitos
- mapa,
- mapas
- Match
- correspondente
- material
- Matriz
- max
- significa
- Memória
- Menu
- ir
- mensagem
- mensagens
- metadados
- método
- métodos
- Microsoft
- poder
- migrado
- migração
- mínimo
- menor
- desaparecido
- erro
- Moda
- EQUIPAMENTOS
- módulo
- Módulos
- mais
- a maioria
- mover
- em movimento
- Mozilla
- múltiplo
- Nomeado
- nomeadamente
- nomes
- nativo
- Navegar
- necessário
- você merece...
- Cria
- negativo
- líquido
- Novo
- Novos Recursos
- notícias
- Newsletter
- Próximo
- Próximo.js
- nó
- Node.js
- nós
- Notas
- notável
- notificações
- número
- números
- objeto
- óbvio
- ocorreu
- Outubro
- oficial
- Oficialmente
- Velho
- ONE
- operador
- Opção
- Opções
- ordem
- organizações
- originalmente
- Outros
- Outlets
- lado de fora
- Visão geral
- próprio
- pacote
- pacotes
- parâmetro
- parâmetros
- particularmente
- peças
- passou
- Passagem
- caminho
- realizar
- atuação
- performances
- realização
- perspectiva
- peça
- oleoduto
- Lugar
- planos
- platão
- Inteligência de Dados Platão
- PlatãoData
- plug-in
- ponto
- popularidade
- posição
- possível
- Publique
- potencialmente
- poderoso
- justamente
- preferir
- presença
- presente
- bastante
- evitar
- visualização
- anterior
- anteriormente
- Prévio
- provavelmente
- problemas
- processo
- em processamento
- Produção
- profiling
- Agenda
- projeto
- projetos
- promissor
- adequado
- Propriedades
- propriedade
- fornecer
- fornecido
- fornece
- procuração
- publicado
- Empurrar
- quebra-cabeça
- qualidade
- Links
- elevando
- alcance
- Cru
- RE
- Reagir
- Leia
- percebendo
- razão
- razões
- recomendando
- registro
- reduzir
- refletir
- registro
- relacionado
- liberar
- liberado
- remoto
- remover
- Removido
- representação
- REPETIDAMENTE
- substituído
- Denunciar
- solicitar
- pedidos
- requerer
- requeridos
- resiliente
- resposta
- DESCANSO
- resultar
- Resultados
- retorno
- voltar
- Retorna
- Livrar
- roadblocks
- Tipo
- raiz
- Rota
- roteador
- Regra
- regras
- Execute
- corrida
- seguro
- mesmo
- Sass
- Salvar
- cenários
- escopo
- Segundo
- parece
- sentido
- Série
- serviço
- Sessão
- conjunto
- contexto
- instalação
- Shadow
- Baixo
- rede de apoio social
- mostrar
- Assinaturas
- semelhante
- simples
- simplificar
- desde
- solteiro
- situação
- Tamanho
- tamanhos
- Lentamente
- pequeno
- menor
- So
- até aqui
- solução
- Soluções
- alguns
- algo
- Parecer
- fonte
- Espaço
- específico
- estável
- suporte
- padrão
- padrões
- começo
- Comece
- Status
- ficar
- Passo
- Ainda
- Dê um basta
- loja
- armazenadas
- História
- Estratégia
- rigoroso
- mais rigoroso
- estrutura
- estilo
- Inscreva-se
- tal
- super
- ajuda
- Suportado
- suportes
- surpresas
- Interruptor
- .
- Tailwind
- Tailwindcss
- Tire
- toma
- tomar
- Target
- Profissionais
- equipes
- modelo
- modelos
- teste
- ensaio
- testes
- A
- A fonte
- deles
- coisa
- coisas
- este ano
- Através da
- tempo
- demorado
- linha do tempo
- vezes
- para
- juntos
- token
- Tom
- toneladas
- também
- ferramenta
- ferramentas
- nível superior
- para
- traçar
- Traçado
- pista
- Rastreamento
- Transformar
- transição
- Tradução
- transparente
- desencadear
- verdadeiro
- tipos
- Datilografado
- tipicamente
- para
- compreender
- Universal
- não usado
- os próximos
- Atualizar
- Atualizada
- Atualizações
- atualização
- atualização
- URL
- us
- Uso
- usar
- Utilizador
- usuários
- utilitários
- utilidade
- validação
- validadores
- Valioso
- valor
- Valores
- vário
- Ve
- versão
- Ver
- W3
- esperar
- querido
- aviso
- web
- Webpack
- semana
- semanas
- boas-vindas
- O Quê
- se
- qual
- enquanto
- QUEM
- precisarão
- dentro
- sem
- Ganhou
- Maravilhoso
- Atividades:
- trabalhou
- trabalhar
- seria
- escrever
- escrita
- escrito
- X
- ano
- investimentos
- Youtube
- zefirnet