Angular Cap. II — Angular Lazy Loading Modules
Continuando nossa série sobre Angular, hoje abordaremos um tema importantíssimo dentro do ecossistema Angular: Lazy Loading Modules.
Como já sabemos o Angular utiliza um módulo para agrupar elementos de mesmo contexto na aplicação sejam eles: componentes, diretivas, pipes, services entres outros. Cada módulo tem seu contexto e define um trecho da aplicação. Imaginemos como um quebra-cabeça que ao juntar as peças forma a figura. No Angular é bem similar: Ao juntarmos os módulos formamos um conjunto de contextos que formam a nossa aplicação.
Módulos também podem ser importados em outros módulos, além do próprio Angular possuir módulos padrões para trabalharmos: FormsModule, CommonModule e etc…
Módulos Angular
No ecossistema Angular cada classe que é responsável por um módulo herda o decorador @NgModule, que terá a responsabilidade de aplicar propriedades de configuração a este módulo. As propriedades básicas de um módulo são:
- declarations- Recebe um array de componentes, diretivas e pipes que serão utilizadas no contexto do módulo. É importante comentar que um componente pode ser declarado somente em um componente. Caso seja necessário utilizar um componente em mais de um contexto de módulo, é interessante isolar tudo o que é compartilhável na aplicação em um módulo SharedModule e importá-lo em quais módulos desejar.
- imports -Recebe um array de outros módulos que serão utilizados dentro do contexto do Módulo.
- exports- Recebe os declarations que poderão ser reutilizados em outro módulo.
- providers- Recebe os serviços da aplicação, sejam eles guards, interceptors, ou services class.
e afinal, o que é o Lazy Loading Modules ?
Por padrão, ao importamos os nossos módulos dentro da aplicação, o Angular faz o carregamento de todos os módulos que foram importados de uma vez só. Imagine um cenário onde sua aplicação tenha 50 módulos de diversos contextos e ao carregar a página todos esses módulos são carregados de uma vez só. Inviável não ?
Para isto o Angular possui a funcionalidade Lazy Loading Modules, que permite que carreguemos os módulos por demanda. Somente quando o usuário for para uma determinada rota, que o módulo será carregado. Isto garante uma melhora boa em performance na aplicação, junto a uma facilidade na escalabilidade do projeto.
Vamos ver como isto funciona na prática.
Implementando Lazy Loading Modules
Garantindo que você possua o @angular/cli instalado em seu projeto vamos criar o primeiro módulo de nossa aplicação usando o padrão de roteamento. Este módulo conterá apenas um formulário simples.
Para isto basta executar o comando.
Feito isto vamos criar o componente do formulário que será declarado no nosso LazyForm. Para isto vamos executar o comando abaixo:
Isto garantirá que nosso componente será criado dentro do nosso módulo lazyform. Nossos diretórios serão similares a isto:
Note que o componente FormularioComponent foi declarado em nosso LazyFormModule. Isto garantirá que nosso componente será associado ao contexto do módulo com sucesso.
Feito isto, vamos agora configurar o nosso arquivo lazyform.routing.module.ts que será responsável por gerenciar as nossas rotas da aplicação e distribuí-las para os módulos específicos.
Acima, criamos uma lista das rotas que serão distribuídas, definindo a cada uma o caminho que será direcionado cada módulo, junto ao módulo que será carregado quando este caminho for acessado no cliente. É interessante verificar que também podemos adicionar rotas default, caso o usuário acesse um página que não existe neste contexto. Neste caso ele seria direcionado para tela principal.
A propriedade loadChildren é a que possui responsabilidade por fazer o carregamento do módulo sobe demanda. No exemplo acima utilizamos o padrão que é utilizado do Angular 7 para baixo. Como o time do Angular lança releases a cada 6 meses este padrão teve uma leve alteração, utilizando Promises para carregar os módulos e ajudando ainda mais o roteamento a ser perfomático.
No nosso exemplo, toda vez que o usuário requisitar a url /formulario o Angular saberá qual módulo é respectiva para aquela rota e carregará este por demanda.
A nível de comparação, vamos criar outro módulo que será carregado quando acessarmos a url /home.
Seu código será parecido com:
Com dois módulos separados por rotas vamos testar e garantir que os carregamentos dos mesmos estão sob demanda.
Pelo Network de nosso navegador podemos perceber que os arquivos responsáveis por carregar o módulo são requisitados separados pela rota como esperado.
De fato esta abordagem é a melhor alternativa para performar o carregamento dos módulos na iniciação da aplicação, garantindo além de performance, uma aplicação bem organizada e separada por contextos bem definidos.
Espero que tenham gostado. O link de exemplo está em meu github.
