O autor do material, cuja tradução estamos publicando, sugere falar sobre o Angular 8. Aqui discutiremos alguns tópicos particularmente interessantes levantados nos eventos NgConf e Google I / O 2019. Portanto, se você está interessado em Angular, mas por algum motivo não viu relatórios de desses eventos, acreditamos que você ficará curioso para saber o que pode esperar do Angular 8.
Pontos-chave
Tenho certeza de que agora você está ansioso pelo lançamento do Angular 8, está experimentando os mesmos sentimentos que senti após o NgConf 2019. O
relatório de Igor Minar tocou em muitas inovações esperadas - de ferramentas a tecnologias como carregamento diferencial e muitas outras coisas maravilhosas.
Vamos discutir como tudo isso pode afetar seus projetos. Nomeadamente, consideraremos novas oportunidades e discutiremos se sua aparência levará ao reconhecimento de mecanismos existentes obsoletos ou ao fato de que o novo será incompatível com o antigo.
Novos recursos
Loading Carga diferencial
Ao aplicar a tecnologia de carregamento diferencial, a Angular, durante o processo de montagem do projeto, pode criar um pacote separado para polyfills. Depende do arquivo da lista do
browserlist . Aqui está como será em termos gerais.
Acima está uma nova maneira de compactar projetos ( fonte )O uso desse recurso reduzirá o tamanho dos pacotes configuráveis.
Economia com carga diferencial ( fonte )Como isso funciona?
O Angular coletará arquivos de polyfill adicionais e eles serão incorporados ao código usando os atributos do
nomodule :
<body> <pp-root></pp-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="es2015-polyfills.js" nomodule></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body>
O atributo
nomodule , booleano, impede que o script seja carregado e executado em navegadores que suportam módulos ES6. Esses navegadores ignoram esses scripts. Navegadores mais antigos fazem o download e os executam.
▍SVG Templates
Agora, os arquivos SVG podem ser usados como modelos. Até agora, HTML incorporado ou externo poderia ser usado como modelos.
@Component({ selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: ["./icon.component.css"] }) export class AppComponent {...}
I Ivy mecanismo de renderização experimental
O mecanismo Ivy ainda está em fase experimental. Após o lançamento do Angular 8, você pode testá-lo usando o sinalizador
--enable-ivy ao criar um novo aplicativo. O código correspondente é mostrado abaixo. Lembre-se de que o Ivy ainda não está pronto (ainda está no status de "pré-visualização") e, como Igor Minar disse no NgConf 2019, ainda é recomendável usar o View Engine ao criar novos aplicativos.
Para habilitar o uso do Ivy em um projeto existente, é necessário definir o parâmetro da
enableIvy option angularCompilerOptions em
angularCompilerOptions como
true no
angularCompilerOptions :
"angularCompilerOptions": {"enableIvy": true}
Você pode criar um novo aplicativo no qual o Ivy será usado:
$ ng new my-app --enable-ivy
Ivy oferece os seguintes recursos úteis, os três primeiros esperados no Angular 9:
- Compilação mais rápida.
- Verificação de tipo aprimorada para modelos.
- Reduzindo o tamanho dos pacotes. Agora , se você ainda não o viu, uma demonstração de um aplicativo de 4,3 Kb com o Google I / O 19.
- Compatibilidade com versões anteriores.
- E meu recurso favorito é a depuração de modelos. Estou certo de que, como eu, muitos desenvolvedores precisam disso.
▍Suporte Bazel
Bazel é outra ferramenta que o Google mudou para o mercado de código aberto. Igor Minar diz que o Bazel é usado há muito tempo para as necessidades internas da empresa e agora está disponível para todos. Para saber mais sobre esse construtor de projetos, consulte a
documentação e leia como usar o Bazel com
Angular .
Talvez você esteja se perguntando se o Bazel está pronto para uso prático. Responda brevemente a essa pergunta - ainda não está pronta. Agora ele está no status de "pré-visualização prévia". Deixe-me citar Alex Eagle, que lidera a equipe de desenvolvimento de ferramentas Angular no Google: “Se você já entrou nas águas de Bazel antes, não poderia deixar de notar que havia muitos tubarões ... Agora já gerenciamos os tubarões, mas a água ainda pode ser frio. "
Bazel ainda está sendo trabalhado, espera-se que seja incluído no
@angular/cli na versão 9.
Aqui estão alguns recursos úteis que o Bazel pode nos fornecer:
- Acelerando o tempo de construção do projeto. A primeira compilação leva algum tempo, mas as compilações paralelas são muito mais rápidas. O Angular já usa o Bazel e agora as rotinas de IC são concluídas em 7,5 minutos, não em uma hora, como era antes do Bazel.
- Montagem de projeto incremental. Será possível coletar e implantar não o aplicativo inteiro, mas apenas o que mudou nele.
- Capacidade de trabalhar com arquivos Bazel, que, por padrão, estão ocultos.
Você pode adicionar suporte ao Bazel em um projeto existente da seguinte maneira:
ng add @angular/bazel
Você pode criar um novo aplicativo usando o Bazel:
$ npm install -g @angular/bazel $ ng new my-app --collection=@angular/bazel
▍API Builders
A nova versão do Angular permite usar os API Builders, também conhecidos como Architect. Angular usa construtores para executar operações básicas:
serve ,
build ,
test ,
lint e
e2e . Aqui está um exemplo usando assemblers do arquivo
angular.json :
... "projects": { "app-name": { ... "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", ... }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", ... }, "test": { "builder": "@angular-devkit/build-angular:karma", ... }, "lint": { "builder": "@angular-devkit/build-angular:tslint", ... }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", ... } } } }
Agora você pode criar seus próprios colecionadores. Eu os vejo como semelhantes aos comandos gulp / grunt usados nos velhos tempos.
Em geral, o coletor é apenas uma função com um conjunto de comandos que são passados para o método
createBuilder() do pacote
@angular-devkit/architect :
import { createBuilder } from '@angular-devkit/architect'; function customBuild(options, context) { return new Promise((resolve, reject) => {
Você pode dar uma olhada nos construtores Angular internos
aqui .
Aqui estão ótimas coisas sobre eles no blog Angular.
HanAlterações no carregamento lento
A nova versão do Angular também terá uma nova versão do sistema de carregamento do módulo lento, cuja aparência leva ao fato de que a sintaxe existente
loadChildren:string será descontinuada.
Anteriormente, era assim:
loadChildren: './lazy/lazy.module#LazyModule';
Com o lançamento do Angular 8 - assim:
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
Se você possui muitos módulos ao trabalhar com os quais o mecanismo de carregamento lento é usado e deseja automatizar sua tradução para um novo modo de operação, dê uma olhada
neste material.
▍Support API $ location AngularJS
A equipe de desenvolvimento da Angular está comprometida em apoiar aqueles que usam o AngularJS e ajudá-los a mudar para o Angular. Como resultado, o suporte ao serviço
$location foi adicionado ao sistema, no pacote
angular/common/upgrade . Estamos falando dos seguintes recursos:
- Obtendo status do serviço
$location . - Rastreando alterações de endereço.
- Obtendo as mesmas informações sobre os componentes do endereço que podem ser obtidos no AngularJS (
hostname , protocol , port , search ). - Testando o serviço usando a API MockPlatformLocation.
▍ Trabalhadores da Web
O Angular 8 adiciona suporte para trabalhadores da Web. Com a ajuda deles, você pode organizar a execução em segundo plano do código que consome muitos recursos. Para criar um novo trabalhador da Web, você pode usar o seguinte comando da interface de linha de comando Angular:
ng g webWorker <name>
▍ Trabalhadores de serviço
Desde recentemente, houve um aumento sério na popularidade de aplicativos da web progressivos, muitas melhorias nos trabalhadores de serviços foram feitas. Em particular, uma dessas melhorias foi a adição do parâmetro
SwRegistrationOptions . Outra melhoria foi o suporte de vários aplicativos no mesmo domínio.
Leia mais sobre profissionais de serviço
nesta seção da documentação Angular.
▍ Melhorias de formulário
O método
markAllAsTouched foi
markAllAsTouched , o que permite marcar todos os elementos dentro de um
FormGroup como
touched . Isso é muito útil nos casos em que você precisa executar a validação de todos os controles em um
FormGroup . Antes disso, a mesma coisa era feita assim:
validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls).map((controlName) => { form.get(controlName).markAsTouched({onlySelf: true}); }); }
No novo Angular, você pode usar o método
clear para
clear FormArray , que remove todos os elementos dele. Anteriormente, era necessário usar a seguinte construção, removendo o primeiro elemento em cada iteração do loop:
while (formArray.length) { formArray.removeAt(0); }
Você não precisa mais fazer isso. Agora basta chamar um único método:
formArray.clear()
▍Configurando o momento de receber uma resposta ao usar as diretivas ViewChild e ContentChild
Esse novo recurso implica o uso do sinalizador
static , que permite especificar quando a solicitação é resolvida, definida pela
ViewChild ou
ContentChild .
Você pode ter encontrado os seguintes exemplos de comportamento inconsistente do sistema. Às vezes, os resultados da pesquisa estão disponíveis no método de ciclo de vida
ngOnInit e, às vezes, não existem antes de chamar
ngAfterContentInit ou
ngAfterViewInit . Veja como usar o sinalizador
static :
Observe que esses recursos não estão disponíveis para as
ViewChildren e
ContentChildren . As consultas de pesquisa de itens correspondentes são executadas após a detecção de alterações.
Ao usar
static: true deve ter cuidado, pois o uso desse sinalizador não permitirá obter resultados de modelos dinâmicos (por exemplo, * ngIf). Uma regra de esquema foi adicionada ao sistema, permitindo a conversão de código existente para usar a nova sintaxe. Essa sintaxe será usada com o Ivy.
→ Detalhes sobre esse recurso podem ser encontrados
aqui .
TypesScripts de suporte 3.4.x
O Angular agora usa o TypeScript 3.4 (a sétima versão do Angular usa o TypeScript 3.2.x). Não há muitas mudanças importantes na nova versão do TS. Provavelmente não levarão a consequências desagradáveis.
→ Detalhes sobre as inovações do TS 3.4 podem ser encontrados
aqui .
▍ Melhoria de desempenho
Sob as condições atuais,
ServerRendererFactory2 cria uma nova instância de
DomElementSchemaRegistry para cada solicitação, o que é bastante caro em termos de recursos. Agora, o compartilhamento da instância global do
DomElementSchemaRegistry será organizado.
▍ Implantando aplicativos Angular na hospedagem Firebase
Se você usa a hospedagem Firebase para implantar aplicativos Angular, definitivamente gostará dessa inovação. O ponto é que agora na CLI Angular há um comando especial para executar esta operação:
ng run [PROJECT_NAME]:deploy
→
Aqui você pode descobrir mais sobre esse recurso.
APIs desatualizadas
▍Use qualquer tipo ao trabalhar com TesBed.get
O método
TesBed.get tinha duas assinaturas. Um é digitado, o segundo é o tipo de recebimento e retorno
any . Agora a assinatura do método, que fornece o uso do tipo
any , está obsoleta. Você pode usar esse método apenas com uma indicação de um tipo específico. Isso, por exemplo, afetará os casos de trabalho com tokens de string (que não são suportados) e com alguns outros tokens.
Projetos anteriormente usados:
TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken");
Agora, a seguinte abordagem é aplicada:
const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN);
▍Como remover DOCUMENT do navegador angular / de plataforma
DOCUMENT removido do pacote
@angular/platform-browser . Se você usar
DOCUMENT deste pacote, comece a importá-lo do
@angular/common .
Install Desinstalar pacote angular / http
O pacote
@angular/http foi descontinuado no Angular 5, mas ainda estava disponível, já que o
@angular/platform-server dependia dele. Agora este pacote é removido da lista de pacotes.
Mudanças críticas
Correção automática de código
Poucos sabem que o Angular corrigia erros automaticamente ao usar os elementos HTML
tr e
col .
No caso de
tr correções foram feitas se o elemento correspondente não estivesse dentro da
tfoot tbody ,
tfoot ou
thead . As correções consistiam no posicionamento automático de um elemento no
tbody .
No caso de
col foram feitas correções no código em que esse elemento não está dentro da tag
colgroup .
A Angular agora deixa a correção desses erros a critério dos desenvolvedores. Isso é feito para evitar conflitos e erros. Como resultado, aqueles que estão acostumados a esse recurso precisarão cuidar da correção do código eles mesmos.
→ Detalhes sobre isso podem ser encontrados
aqui .
▍ Renomear material angular
O projeto de material angular foi renomeado para componentes angulares. Os nomes dos pacotes não foram alterados.
Sumário
O Angular 8 será lançado muito em breve. A equipe de desenvolvimento Angular está fazendo um ótimo trabalho. Os resultados de seus esforços facilitam o trabalho e a vida de quem usa o Angular. Em particular, por exemplo, a cada nova versão da estrutura, fica cada vez mais fácil mudar para a versão anterior. Aqui está, por exemplo, a aparência da Air France.
Tempo necessário para atualizar para novas versões do Angular ( origem )Como resultado, podemos esperar que a transição do Angular 7 para o Angular 8 não demore muito e não exija esforços sérios.
Aqui você encontra tutoriais passo a passo sobre como atualizar para novas versões do Angular.
Cerca de um mês atrás, Igor Minar
disse que tudo indica que o Angular 8.0.0 pode muito bem sair no final de maio.
Angular 8.0.0-rc.5 foi lançado em
24 de maio.
O futuro do Angular parece bastante otimista. Tudo o resto depende de nós.
Caros leitores! O que você espera do Angular 8?
