Novo modelo de Rotas no Angular 17

Oie pessoal, vou contar um pouco da minha experiência com a versão 17.2.0. A última versão que estou mexendo em outro projeto é 13.2.0. Então foi uma realidade um pouco diferente do costume. Mas Já adianto que para mim ficou bem melhor a formatação de rotas e as importações etc.

A ideia de atuar novamente com o Angular vem de uma construção de um projeto que eu estou fazendo na faculdade e resolvi desenvolver com o framework Angular. Nesse projeto eu já havia montado o designer, as paletas de cores etc. Então era o momento de mão na massa…

Obs: Tenha já instalado uma IDE (Ambiente de Desenvolvimento Integrado), que inclua um Editor de código e também um gerenciador de pacote. Estarei usando o VSCode e o NodeJs.

Verifique a instalação do Node.js e npm:

$ node -v

$ npm -v

Preciso instalar o angular!

Componentes Independentes

Na geração dos arquivos, ao analisar o component.ts temos novas funcionalidades no @Component. O standalone: true, que podemos dizer que “autônomo: verdadeiro” e o imports: [] que são as importações.

Vamos detalhar, o standalone, ele vem como padrão true que significa que ele pode funciona de forma independente, que não necessita de outras dependências externas. Isso pode ser útil para criar componentes reutilizáveis e autocontidos.

Imports é o campo onde é possível importa as diretivas e pipes independentes, dessa forma as importações não precisam ser declaradas em @NgModule, por esse motivo que você não vê mas o arquivo @NgModule.

Rotas

Para criação de rotas, mudaram também um pouco.

Get Joselaine Romão’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Um exemplo do que eu tenho na versão 13:

menu.component.html

Na versão 17

menu.component.html

O [routerLink] continua da mesma forma na declaração no html.

Antigamente realizávamos as importações no @NgModule é era passado o RouterModule. Atualmente RouterOutlet é responsável por lidar com o clico de vida de um componente renderizado, como a inicialização, detecção de alterações e a destruição do componente. Quando o standalone está ativo ele renderiza a rota específica em um local determinado e RouterLink é a navegação entre rotas, aonde nos como desenvolvedor podemos definido o caminho dos componentes e ele simplifica a navegação.

Definição das rotas

Temos o arquivo chamado app.routes.ts. O mesmo vem preparado para a montagem das rotas, o preenchimento vai conforme o objetivo do projeto.

app.routes.ts

Para maiores informações sobre as informações passada, temos também a documentação do Angular completo.

- https://angular.io/guide/standalone-components;

- https://angular.io/tutorial/tour-of-heroes/toh-pt5;