Um guia para configurar o HMR (Hot Module Reload) em um projeto Angular CLI
Neste artigo, vou guiá-lo através da adição de HMR a um projeto que é configurado pelo Angular CLI usando o plugin NGXS.
O que é o HMR?
HMR significa Hot Module Reload, que tem outro nome, Hot Module Replacement .
Ele troca, adiciona ou remove módulos enquanto um aplicativo está em execução, sem recarregar a página inteira.
Isso acelera o processo de desenvolvimento por:
- Retendo o estado do aplicativo que é perdido durante uma recarga completa.
- Economize tempo valioso de desenvolvimento atualizando apenas o que foi alterado.
- Atualize instantaneamente o navegador quando forem feitas modificações no CSS / JS no código-fonte, o que é quase comparável à mudança de estilos diretamente nas ferramentas de desenvolvimento do navegador.
Para adicionar este recurso, usarei o plugin NGXS HMR .
Instalar o módulo quente Recarregar
Execute npm i @ngxs/hrm-plugin @angularclass/hmr --save-dev
para instalá-lo.
Adicionar novo arquivo de ambiente
Crie um arquivo chamado src/environments/environment.hmr.ts
com o seguinte conteúdo:
environment.hmr.ts
Defina hmr
como true
para uso em main.js
para executar o modo HMR.
Atualizar o Angular.json
Isto terá duas partes:
- Adicionar
hmr
parabuild.configurations
- Adicionar
hmr
aserve.configurations
Isso substitui o ambiente quando a configuração hmr
é chamada:
Adicionar hmr para build.configurations
Adicione configuração hmr
para serve
para construir com o ambiente acima:
Adicionar hmr a serve.configurations
Adicione um novo script em package.json
Adicione um novo script para servir o aplicativo:
package.json
Atualizar main.ts
Adicione lógica para verificar o hmr
para executar o aplicativo no modo hot replacement do módulo:
main.ts
Se você vir esse erro
Não é possível resolver ' @ angularclass / hmr '
Você precisa instalar @angularclass/hmr
Testando
Ao iniciar o aplicativo pelo npm run hmr
no terminal, você pode ver:
tela termial quando npm run hmr
Atualize algum texto em app.component.html
para ver o HMR acontecendo no log do console:
console localhost
Você pode ver o aplicativo atualizar parcialmente apenas os arquivos relacionados.
Nota: No plug-in de hmr da página , eles mencionam e atualizam para
tsconfig.app.json
adicionando o nó do tipo. Parece que não precisamos dele para servir hmr.
Resumo
O Hot Module Reload é um ótimo recurso do webpack que ajuda a reduzir o tempo de carregamento ao alterar o código durante a implementação. Isso melhora a velocidade de desenvolvimento e aprimora a experiência de criar aplicativos.
Espero que você tenha achado este artigo útil! Você pode me seguir no Medium . Sinta-se livre para deixar qualquer dúvida nos comentários abaixo. Eu ficarei feliz em ajudar!
Verifique o código fonte aqui .
Recursos / Referências
[1]: Hot Module Replacement https://webpack.js.org/concepts/hot-module-replacement/
[2]: HMR em NgXS https://ngxs.gitbook.io/ngxs/plugins/hmr