Angular4应用修改后如何阻止浏览器重载，无需重复构建实现无刷新更新？

嘿，这个需求刚好是Angular开发里很常见的优化点，Angular 4配合Angular CLI的**热模块替换（Hot Module Replacement, HMR）**就能完美解决——不需要浏览器重载，修改代码后实时更新页面，还能保留页面状态！下面一步步给你讲清楚：

1. 启用HMR，实现无重载实时更新 #

Angular CLI（对应Angular 4的版本是@angular/cli@1.x）自带对HMR的支持，只需要几步配置：

• 先安装HMR依赖：

  npm install --save-dev @angularclass/hmr
  

• 在项目根目录新建hmr.ts文件，写入HMR的核心逻辑：

  import { NgModuleRef, ApplicationRef } from '@angular/core';
  import { createNewHosts } from '@angularclass/hmr';
  
  export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
    let ngModule: NgModuleRef<any>;
    module.hot.accept();
    bootstrap().then(mod => ngModule = mod);
    module.hot.dispose(() => {
      const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
      const elements = appRef.components.map(c => c.location.nativeElement);
      const removeOldHosts = createNewHosts(elements);
      ngModule.destroy();
      removeOldHosts();
    });
  };
  

• 修改main.ts，替换原有的启动逻辑，接入HMR：

  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  import { hmrBootstrap } from './hmr';
  
  if (environment.production) {
    enableProdMode();
  }
  
  const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
  
  if (environment.hmr) {
    if (module['hot']) {
      hmrBootstrap(module, bootstrap);
    } else {
      console.error('HMR未在webpack-dev-server中启用！');
      console.log('你是否在ng serve时添加了--hmr参数？');
    }
  } else {
    bootstrap().catch(err => console.log(err));
  }
  

• 在environments/environment.ts中添加hmr: true，生产环境的environment.prod.ts里设为false即可
• 最后用这个命令启动项目：

  ng serve --hmr
  

这样修改代码后，浏览器不会整页重载，只会更新你修改的组件/模块，页面的状态（比如表单输入内容、滚动位置）都能保留，终端用户能实时看到变更。

2. 关于“每次修改是否必须构建” #

用HMR配合ng serve的话，完全不需要手动构建——webpack-dev-server会在后台自动做增量编译，只处理你修改的文件，然后通过HMR把更新推送到浏览器。整个过程几乎是无感的，你只管写代码就行，不用手动触发构建命令。

3. 有没有无需构建就能让变更生效的方法？ #

严格来说，Angular是基于TypeScript的框架，TypeScript代码必须编译成JavaScript才能在浏览器运行，所以完全跳过构建是不可能的。但ng serve --hmr的增量编译速度非常快，尤其是修改HTML/CSS模板时，几乎瞬间就能在浏览器看到效果，体验上和直接修改原生前端代码生效差不多，你基本感觉不到“构建”的过程。

内容的提问来源于stack exchange，提问作者Arp