O que há de novo no Angular v16?

Angular, mantido pelo Google, é uma estrutura de código aberto amplamente utilizada para o desenvolvimento de aplicativos da web. Ele oferece um kit de ferramentas robusto e uma variedade de recursos que permitem criar aplicativos da Web dinâmicos, responsivos e escaláveis.

O recente lançamento da versão 16 do Angular apresenta atualizações e melhorias interessantes para a experiência de desenvolvimento, bem como melhor desempenho e estabilidade do aplicativo.

1. Sinais Angulares

Sinais Angulares é uma biblioteca que possibilita a definição de valores reativos e o estabelecimento de dependências entre eles. Aqui está um exemplo simples de como utilizar Angular Signals dentro de um aplicativo Angular:

@Componente ({
 seletor: 'meu-aplicativo',
 estar sozinho: verdadeiro,
 modelo: `
{{ nome completo() }} "setNome('João')">Clique</button>
`,
})
exportaraula Aplicativo {
 primeiroNome = sinal('Jane');
 últimoNome = sinal(

instagram viewer

'Corça');
 nomecompleto = computado(() =>`${esse.primeiro nome()}${esse.sobrenome()}`);
construtor() {
 efeito(() =>console.registro('Nome alterado:', esse.nome completo()));
 }
 setName (novoNome: corda) {
esse.primeiroNome.set (novoNome);
 }
}

O trecho de código acima cria um valor calculado chamado fullName, que depende dos sinais firstName e lastName. Além disso, ele define um efeito, uma função de retorno de chamada que é executada sempre que o valor dos sinais que ele lê muda.

Nesse caso, o valor fullName depende de firstName e lastName, portanto, alterar qualquer um deles aciona o efeito. Quando o valor de firstName é definido como John, o navegador registra a seguinte mensagem no console:

 Nome alterado: John Doe.

2. Nova Coleção Ng Independente

A partir do Angular v16, você pode criar novos projetos autônomos desde o início! Para experimentar a visualização do desenvolvedor dos esquemas autônomos, certifique-se de ter o Angular CLI v16 instalado e execute o seguinte comando:

ng novo --autônomo

Ao fazer isso, você obterá uma estrutura de projeto mais simples sem nenhum NgModules. Além disso, todos os geradores do projeto produzirão diretivas, componentes e tubos autônomos!

3. Mapeamento Automático de Parâmetros de Rota

Considere uma configuração de roteamento da seguinte forma:

exportarconst rotas: Rotas = [{
 caminho: 'pesquisar:/id',
 componente: SearchComponent,
 resolver: {
 searchDetails: searchResolverFn
 }
}];

Antes do Angular 16, você precisava injetar o serviço ActivatedRoute para recuperar parâmetros de URL, parâmetros de consulta ou dados associados para um determinado URL.

Aqui está um exemplo de como você tinha que fazer isso:

@Componente({
 ...
})
exportaraula PesquisarComponente {
 readonly #activatedRoute = injetar (ActivatedRoute);
 id somente leitura$ = esse.#activatedRoute.paramMap (map(parâmetros => params.get('eu ia')));
 dados somente leitura$ = esse.#activatedRoute.data.map(({
 pesquisarDetalhes
 }) => pesquisarDetalhes);
}

Com Angular 16, você não precisa mais injetar o serviço ActivatedRoute para recuperar vários parâmetros de rota porque pode vinculá-los diretamente às entradas do componente.

Para ativar esta funcionalidade em uma aplicação que utiliza o sistema de módulos, defina o valor correspondente nas opções do RouterModule:

RouterModule.forRoot (rotas, {
 bindComponentInputs: verdadeiro
})

Para um aplicativo autônomo, você precisa chamar uma função:

provideRoutes (rotas, withComponentInputBinding());

Depois de ativar essa funcionalidade, o componente fica muito mais simples:

@Componente({
 ...
})
exportaraula PesquisarComponente {
@Entrada() eu ia!: corda;
@Entrada() searchDetails!: SearchDetails;
}

4. Entrada Necessária

Um recurso altamente esperado para a comunidade Angular é a capacidade de marcar certas entradas conforme necessário. Até agora, você tinha que usar várias soluções alternativas para conseguir isso, como gerar um erro no NgOnInit ciclo de vida se a variável não foi definida ou modificando o seletor do componente para incluir o obrigatório entradas.

No entanto, ambas as soluções tinham suas vantagens e desvantagens. A partir da versão 16, tornar uma entrada obrigatória é tão simples quanto fornecer um objeto de configuração nos metadados da anotação de entrada:

@Entrada({
 obrigatório: verdadeiro
}) nome!: corda;

5. Vite como Dev Server

O Angular 14 introduziu um novo empacotador JavaScript chamado EsBuild, que melhorou significativamente os tempos de compilação em aproximadamente 40%. No entanto, você só poderia perceber esse ganho de desempenho durante a fase de construção e não durante o desenvolvimento com o servidor de desenvolvimento.

Na próxima versão do Angular, a ferramenta de construção Vite permite o uso de EsBuild durante o desenvolvimento também.

Para ativar esse recurso, atualize a configuração do construtor no arquivo angular.json da seguinte forma:

"arquiteto": {
"construir": {
"construtor": "@angular-devkit/build-angular: navegador-esbuild",
"opções": {
 ...
 }
 }

Observe que essa funcionalidade ainda é experimental.

Aprimorando a experiência e o desempenho do desenvolvimento

Angular versão 16 traz atualizações emocionantes como Angular Signals para gerenciamento de dados, projeto autônomo criação, mapeamento automático de parâmetros de rota, entradas necessárias e integração do Vite para melhorar desenvolvimento. Esses aprimoramentos melhoram a experiência de desenvolvimento e aumentam o desempenho do aplicativo.