Padrão App shell

O padrão App shell é uma maneira de renderizar uma parte da sua aplicação usando um route em tempo de build. Ele pode melhorar a experiência do usuário ao iniciar rapidamente uma página renderizada estaticamente (um esqueleto comum a todas as páginas) enquanto o browser baixa a versão completa do client e muda para ela automaticamente após o código carregar.

Isso oferece aos usuários uma primeira renderização significativa da sua aplicação que aparece rapidamente porque o browser pode renderizar o HTML e CSS sem a necessidade de inicializar qualquer JavaScript.

1. Preparar a aplicação

   Faça isso com o seguinte comando do Angular CLI:

   ng new my-app

   Para uma aplicação existente, você tem que adicionar manualmente o Router e definir um <router-outlet> dentro da sua aplicação.

2. Criar o application shell

   Use o Angular CLI para criar automaticamente o application shell.

   ng generate app-shell

   Para mais informações sobre este comando, veja Comando App shell.

   O comando atualiza o código da aplicação e adiciona arquivos extras à estrutura do projeto.

   src├── app│ ├── app.config.server.ts # server application configuration│ └── app-shell # app-shell component│   ├── app-shell.component.html│   ├── app-shell.component.scss│   ├── app-shell.component.spec.ts│   └── app-shell.component.ts└── main.server.ts # main server application bootstrapping

   ng build --configuration=development

   Ou para usar a configuração de produção.

   ng build

   Para verificar a saída do build, abra dist/my-app/browser/index.html. Procure pelo texto padrão app-shell works! para mostrar que o route do application shell foi renderizado como parte da saída.