Angular 6: Lazy Loading

Veja nesse artigo como trabalhar com Lazy Loading em um app criado em Angular↳Angular30 conteúdosCriando Micro Frontends Angular com Native FederationDev (Back & Front) · mar 2026Angular v21 e o Fim da Cobertura de Testes Exclusivamente em TypeScript: Por Que Precisamos Repensar os Testes de ComponentesDev (Back & Front) · jan 2026Angular 8 é lançado com builder APIs e suporte web workerDev (Back & Front) · mai 2019Ver tudo em Dev (Back & Front) → na versão 6.

Caso tenha interesse em baixar a versão final do projeto que iremos desenvolver neste artigo, segue o seu link no GitHub: https://bit.ly/2KnURx1.

Para que você possa ter um exemplo próximo do nosso dia a dia, eu irei criar um app com dois módulos: um para login e um outro para home, não irei implementar eles hoje, mas deixarei pronto para um próximo artigo.

Criação do projeto

Antes de criar o projeto, veja na imagem abaixo a configuração que eu vou utilizar para esse artigo:

Note que eu estou utilizando a última versão do Angular CLI até a data de hoje (06/08/2018).

O primeiro passo será a criação de um novo projeto. Para isso, abra um terminal no seu computador e execute o comando abaixo:

<code>
           ng new angular-lazyloading --routing
</code>

O comando acima criará um novo projeto chamado angular-lazyloading, o parâmetro –routing irá gerar um arquivo na estrutura chamado app-routing.module.ts. Nós utilizaremos esse arquivo para configurar o carregamento dos nossos módulos.

Para os próximos passos eu irei utilizar o VS Code, mas você pode utilizar um editor de Textos (IDE) de sua preferência. Navegue até o projeto e abra ele na sua IDE.

Criando os módulos

O próximo passo será criar os módulos de login e da home do nosso app. Para isso, execute os comandos abaixo no seu terminal:

<code>
       ng generate module login --routing
       ng generate module home --routing
</code>

O comando acima irá criar dois diretórios dentro da sua solution chamados: home e login. Cada diretório deve ter três arquivos: .module.ts, -routing.module.ts e um arquivo de teste .module.spec.ts. Nós iremos focar nos arquivos de .module e -routing. O próximo passo será criar os nossos componentes. Para isso, execute os comandos abaixo no seu terminal:

<code>
         ng generate component login/login
         ng generate component home/home
</code>

Agora, para navegar entre eles será necessário atualizar os arquivos abaixo:

app-routing.module.ts

<code>
const routes: Routes = [
    {  path: 'home', loadChildren: './home/home.module#HomeModule' },
    { path: 'login', loadChildren: './login/login.module#LoginModule' } ];
</code>

Acima, estamos adicionando os nossos módulos no arquivo de routing do nosso app.module. Note que estamos utilizando loadChildren para carregar os nossos módulos, seguido do seu path com #.

login-routing.module.ts

<code>
const routes: Routes = [
     { path: '', component: LoginComponent }
 ];
</code>

Como nós só temos um componente dentro desse módulo, eu deixei o path como root, mas caso você tenha mais de um componente no seu módulo, você pode alterar ele para um outro, como: login, auth, etc.

home-routing.module.ts

<code>
const routes: Routes = [
     { path: '', component: HomeComponent}
 ];
</code>

O mesmo ocorre com o componente Home. Deixar ele na raiz do módulo.

Testando o Lazy loading

Para que vermos o Lazy Loading funcionando, atualize o seu arquivo app.component.html com o trecho de código abaixo:

<code>
<button routerLink="/login">Login</button>
<button routerLink="">Home</button>
<router-outlet></router-outlet>
</code>

Agora execute o comando ng serve no seu terminal e abra o seguinte endereço no seu navegador: http://localhost:4200/. Abaixo você tem um GIF demonstrando o módulo sendo chamado somente quando nós clicamos na sua rota:

Com o projeto configurado dessa forma, você consegue otimizar o seu tempo de resposta. Bom, espero que tenham gostado, e até um próximo artigo, pessoal!