O documento descreve como configurar o lazy loading em um projeto Angular, explicando os três passos necessários: 1) criar módulos de recursos e seus módulos de roteamento; 2) configurar as rotas para carregar os módulos de forma preguiçosa; 3) criar componentes dentro dos módulos de recursos. Exemplos de comandos do Angular CLI são fornecidos para gerar os arquivos necessários.

1. Angular: Lazy Loading

2. Microsoft Most Valuable Professional (MVP)
Arquiteto de Software na TV Bandeirantes
Autor Técnico e Palestrante
Um dos organizadores do .NET SP
Thiago da Silva Adriano

3. Contatos
/tadriano-net @programadriano
@programadriano /perfil/thiagoadriano/
@programadriano tadriano.net@gmail.com
https://medium.com/@programadriano

4. Agenda
▸ Introdução ao Lazy Loading
▸ Exemplo prático

5. Arquitetura básica

7. Projeto Angular
Módulo
Componente Componente
Componente Componente

8. Projeto Angular
Módulo Módulo
Componente
Componente
Componente
Componente

9. Exemplos reais

10. Exemplos reais

15. Projeto Angular
Módulo
menu
Módulo
/news
home
C - menu-uol
C-menu-band
C-news-center
C-news-btn

16. Configurando o Lazy loading

17. Projeto
AppRouting
AppModule
LoginModule HomeModule
LoginRouting HomeRouting

18. Criação do projeto

19. Criação do projeto

20. Criação do projeto

21. Três passos:
▸ Create the feature module
▸ Create the feature module’s routing module
▸ Configure the routes
https://angular.io/guide/lazy-loading-ngmodules

22. Comandos:
▸ ng generate module login --routing
▸ ng generate module admin --routing
https://angular.io/guide/lazy-loading-ngmodules
▸ ng generate component login
▸ ng generate component admin
Módulos Componentes

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

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

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

26. Comandos:
<code>
<button routerLink="/login">Login</button>
<button routerLink="/home">Home</button>
<router-outlet></router-outlet>
</code>

27. Zé em açãoEstrutura do projeto
https://github.com/programadriano/angular7-lazyloading

28. Zé em açãoEstrutura do projeto
https://imasters.com.br/front-end/angular-6-lazy-loading

29. Zé em açãoEstrutura do projetoDúvidas??

30. obrigado!