Implementando rotas lazy loading em seu aplicativo Angular: um guia passo a passo

Por Gaspar Barancelli Junior em 07 de março de 2023

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 produtos, você pode criar um novo módulo chamado 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 loadChildren na definição da rota. Por exemplo, se você quiser carregar o módulo produtos sob demanda, sua configuração de rota pode ser semelhante a isso:

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 import para carregar o módulo de forma assíncrona, e depois usamos a função then para retornar o módulo em si.

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 RouterModule e use a função forChild para definir as rotas. Por exemplo, o módulo produtos.module.ts pode ser assim:

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 forChild em vez de forRoot para definir as rotas neste módulo.

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.

Implementando rotas lazy loading em seu aplicativo Angular: um guia passo a passo

Passo 1: Crie um novo módulo

Passo 2: Configure as rotas

Passo 3: Adicione rotas ao módulo lazy-loaded

Conclusão

// Livros recomendados relacionados ao assunto do post

// Compartilhe esse Post