Adicionar HMR (Hot Module Reload) em um projeto CLI Angular

Um guia para configurar o HMR (Hot Module Reload) em um projeto Angular CLI

TRAN FILHO HOANG em Level Up Your Code Seguir 11 de jul · 3 min ler Foto de Hoang Tran no Unsplash

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:

  1. Retendo o estado do aplicativo que é perdido durante uma recarga completa.
  2. Economize tempo valioso de desenvolvimento atualizando apenas o que foi alterado.
  3. 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:

  1. Adicionar hmr para build.configurations
  2. Adicionar hmr a serve.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