Como implementar o carregamento lento em angular

Sai gowtham Blocked Unblock Seguir Seguindo 29 de dezembro de 2018 Carregamento Preguiçoso em Angular

O Angular CLI é uma ferramenta de interface de linha de comando que pode criar um projeto, adicionar arquivos e executar várias tarefas de desenvolvimento contínuas, como teste, empacotamento e implantação.

Se você precisar atualizar o CLI Angular, poderá atualizá-lo facilmente usando os seguintes comandos.

npm install -g @angular/cli
ng new PROJECT-NAME 
 cd PROJECT-NAME 
 ng serve --open

ng new é usado para gerar clichê angular.

O que é o carregamento lento?

Carregamento preguiçoso nos ajuda a baixar as páginas da web em partes, em vez de baixar tudo em um pacote grande.

Para implementar o Lazy Loading em Angular, precisamos criar um routing module e um arquivo module.ts para o componente que precisamos para carregar com preguiça.

Na imagem acima, criamos dois arquivos que são posts-routing.module.ts e posts.module.ts .

Agora vamos ver o que precisamos codificar nesses dois arquivos.

posts-routing.module.ts

No código acima primeiro, criamos uma matriz de rotas com um objeto contendo caminho e componente.

Na linha 14 , estamos passando a matriz de routes como um argumento para o método RouterModule.forChild .

posts.module.ts

Aqui nós adicionamos um PostsComponent ao array de declarações, é isso que fizemos com os componentes de nível filho.

Agora precisamos criar um novo arquivo chamado app-routing.module.ts no nível de raiz do seu aplicativo, ou seja, dentro da pasta do aplicativo.

app-routing.module.ts

app.module.ts

No arquivo app.module.ts , precisamos remover as declarações dos componentes que gostaríamos de carregar com preguiça.

Esta é nossa saída final

Você viu na imagem acima que implementamos com sucesso o carregamento lento?

Repositório de código

Codificação feliz… ?