Angular中模块热重载（HMR）时如何保留应用状态？

当然有办法实现！我之前刚接触Angular HMR的时候也只搞定了基础重载，每次改代码状态全丢，折腾了好一阵才摸清楚怎么保留状态，跟Vue的机制思路其实是通的，只是Angular需要我们手动借助HMR钩子来管理。

核心思路 #

Angular的HMR默认不会帮我们保留状态，但它提供了hmrOnInit和hmrOnDestroy这两个钩子——简单说就是：在模块要被重载销毁前，把当前应用的状态存起来；模块重载完成后，再把存好的状态恢复回去。

具体实现步骤 #

1. 准备状态存储容器 #

如果你的项目已经用了NgRx、Akita这类状态管理库，那直接用它们的状态快照功能就行；要是没用到，自己写个简单的单例服务也能搞定，用来存全局状态：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class HmrStateService {
  private stateStore: Record<string, any> = {};

  // 保存状态
  save(key: string, data: any) {
    this.stateStore[key] = data;
  }

  // 获取状态
  get(key: string): any {
    return this.stateStore[key];
  }

  // 清空状态（可选）
  clear() {
    this.stateStore = {};
  }
}

2. 在根模块实现HMR钩子 #

根模块（一般是AppModule）需要实现HmrModule接口，利用两个钩子完成状态的存与取：

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HmrModule, HmrState } from '@angularclass/hmr';
import { AppComponent } from './app.component';
import { HmrStateService } from './hmr-state.service';
// 如果用路由的话，记得导入Router
import { Router } from '@angular/router';

@NgModule({
  imports: [
    BrowserModule,
    HmrModule.forRoot() // 这里可以根据需求配置HMR选项
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule implements HmrModule {
  constructor(
    private appRef: ApplicationRef,
    private hmrStateService: HmrStateService,
    private router: Router
  ) {}

  // 模块销毁前：保存状态
  hmrOnDestroy(store: HmrState) {
    // 这里可以存你需要保留的所有状态：路由、用户信息、全局配置等等
    const appState = {
      // 保存当前路由状态
      currentRoute: this.router.url,
      // 保存存在状态服务里的自定义状态
      userInfo: this.hmrStateService.get('userInfo')
    };
    // 把状态存入HMR的store中
    store.state = appState;
  }

  // 模块重载后：恢复状态
  hmrOnInit(store: HmrState) {
    if (!store.state) return;

    // 恢复路由
    if (store.state.currentRoute) {
      this.router.navigateByUrl(store.state.currentRoute);
    }
    // 恢复自定义状态到服务
    this.hmrStateService.save('userInfo', store.state.userInfo);
  }
}

3. 组件局部状态的保存与恢复 #

对于组件里的局部状态（比如表单输入值、折叠面板的展开状态），可以在组件的生命周期钩子里配合状态服务来处理：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HmrStateService } from '../hmr-state.service';

@Component({
  selector: 'app-my-form',
  template: `
    <input [(ngModel)]="username" placeholder="用户名" />
    <input [(ngModel)]="password" type="password" placeholder="密码" />
  `
})
export class MyFormComponent implements OnInit, OnDestroy {
  username = '';
  password = '';
  // 给组件状态加个唯一key，避免和其他组件冲突
  private stateKey = 'myFormComponentState';

  constructor(private hmrStateService: HmrStateService) {}

  ngOnInit() {
    // 从状态服务中恢复之前保存的状态
    const savedState = this.hmrStateService.get(this.stateKey);
    if (savedState) {
      this.username = savedState.username;
      this.password = savedState.password;
    }
  }

  ngOnDestroy() {
    // 组件销毁前（HMR触发销毁时）保存当前状态
    this.hmrStateService.save(this.stateKey, {
      username: this.username,
      password: this.password
    });
  }
}

4. 用NgRx的简化方案（如果用状态管理库） #

要是你的项目用了NgRx，那步骤会更简单——直接在HMR钩子里保存和恢复Store的快照：

// AppModule里的钩子
import { Store } from '@ngrx/store';

// ... 其他代码省略

constructor(private store: Store) {}

hmrOnDestroy(store: HmrState) {
  // 保存整个Store的状态快照
  store.state = {
    ngrxState: this.store.snapshot()
  };
}

hmrOnInit(store: HmrState) {
  if (store.state?.ngrxState) {
    // 分发一个恢复状态的action，让reducer处理
    this.store.dispatch({ 
      type: '[HMR] Restore State', 
      payload: store.state.ngrxState 
    });
  }
}

然后在你的根reducer里处理这个[HMR] Restore State动作，把传入的状态替换掉当前的Store状态就行。

注意事项 #

• 不是所有状态都适合保存：比如定时器、WebSocket连接这类副作用，重载后需要重新初始化，不能直接存状态恢复。
• 第三方组件的状态：有些UI组件库的组件状态可能需要查看官方文档，看是否有导出/导入状态的API，或者手动模拟状态恢复。
• 你提到的那个GitHub issue里也有人分享过类似思路，核心就是靠HMR的钩子手动管理状态，细节可以根据自己的项目结构调整。

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