Implementando rotas lazy loading em seu aplicativo Angular: um guia passo a passo
Se você está trabalhando com o Angular, provavelmente já ouviu falar sobre rotas lazy loading. Para aqueles que ainda não estão familiarizados com o conceito, rotas lazy loading é uma técnica que permite que você carregue módulos Angular sob demanda, ou seja, apenas quando o usuário acessar uma determinada rota específica. Isso ajuda a melhorar o desempenho e a eficiência da sua aplicação Angular, especialmente se ela tiver muitos módulos e rotas.
Neste artigo, vou guiá-lo através do processo de implementação de rotas lazy loading no Angular.
Passo 1: Crie um novo módulo
O primeiro passo é criar um novo módulo para cada rota que você deseja carregar sob demanda. Por exemplo, se você tiver uma rota chamada
, você pode criar um novo módulo chamado produtos
.produtos.module.ts
Passo 2: Configure as rotas
Em seguida, você precisa configurar as rotas no módulo principal (app.module.ts) para carregar os módulos sob demanda. Para fazer isso, use a função
na definição da rota. Por exemplo, se você quiser carregar o módulo loadChildren
sob demanda, sua configuração de rota pode ser semelhante a isso:produtos
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'produtos',
loadChildren: () => import('./produtos/produtos.module').then(m => m.ProdutosModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Observe que usamos a função
para carregar o módulo de forma assíncrona, e depois usamos a função import
para retornar o módulo em si.then
Passo 3: Adicione rotas ao módulo lazy-loaded
Por fim, você precisa adicionar as rotas ao módulo lazy-loaded que criou no Passo 1. Para fazer isso, importe o módulo
e use a função RouterModule
para definir as rotas. Por exemplo, o módulo forChild
pode ser assim:produtos.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { ProdutosComponent } from './produtos.component';
const routes: Routes = [
{
path: '',
component: ProdutosComponent
}
];
@NgModule({
declarations: [ProdutosComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class ProdutosModule { }
Observe que usamos a função
em vez de forChild
para definir as rotas neste módulo.forRoot
Conclusão
A implementação de rotas lazy loading no Angular pode parecer um pouco complicada à primeira vista, mas na verdade é um processo relativamente simples e fácil. Com as rotas lazy loading, você pode melhorar significativamente o desempenho e a eficiência da sua aplicação Angular, garantindo que ela carregue apenas os módulos necessários sob demanda.