# @angularclass/hmr 中文文档

规范地址：https://npmcn.com/package/%40angularclass/hmr/

版本：3\.0\.0
npm 元数据更新时间：2022-06-12T14:42:23.174Z
中文译文更新时间：2026-11-06T04:21:44.067Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40angularclass/hmr
原文对照：https://npmcn.com/package/%40angularclass/hmr/?lang=original
项目主页：https://github.com/PatrickJS/angular-hmr#readme
源码仓库：https://github.com/PatrickJS/angular-hmr

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：52.7 kB，15 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2016-08-21T10:46:38.677Z
- 最新版本发布：2020-08-31T01:54:12.367Z
- 近 30 天下载量：186931（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 0 个）

## 中文简介

角-hmr:Web包装和角的热模块替换

## 安装

```sh
npm install @angularclass/hmr
```

也可以使用：`pnpm add @angularclass/hmr`、`yarn add @angularclass/hmr`、`bun add @angularclass/hmr`

## README

[![Angular HMR](https://cloud.githubusercontent.com/assets/1016365/26220655/77e69902-3be1-11e7-8305-87471affe598.png)](https://github.com/PatrickJS/angular-hmr)

# 角热模块替换

> 角- HMR 函数 为Webpack和Angular重新装入热模块。 所有版本的 Angular 和 Webpack 将使用此模块

`npm install @angularclass/hmr`

![hmr-state-dom](https://cloud.githubusercontent.com/assets/1016365/18380378/e573320e-762b-11e6-99e0-cc110ffacc6a.gif)

`main.browser.ts`

```typescript
import { removeNgStyles, createNewHosts, bootloader } from '@angularclass/hmr';

@NgModule({
  bootstrap: [ App ],
  declarations: [ App ],
  imports: [
    // Angular 2
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([], {
      useHash: true
    }),
    // app
    appModule
    // vendors
  ],
  providers: []
})
class MainModule {
  constructor(public appRef: ApplicationRef) {}
  hmrOnInit(store) {
    if (!store || !store.state) return;
    console.log('HMR store', store);
    console.log('store.state.data:', store.state.data)
    // inject AppStore here and update it
    // this.AppStore.update(store.state)
    if ('restoreInputValues' in store) {
      store.restoreInputValues();
    }
    // change detection
    this.appRef.tick();
    delete store.state;
    delete store.restoreInputValues;
  }
  hmrOnDestroy(store) {
    var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // recreate elements
    store.disposeOldHosts = createNewHosts(cmpLocation)
    // inject your AppStore and grab state then set it on store
    // var appState = this.AppStore.get()
    store.state = {data: 'yolo'};
    // store.state = Object.assign({}, appState)
    // save input values
    store.restoreInputValues  = createInputTransfer();
    // remove styles
    removeNgStyles();
  }
  hmrAfterDestroy(store) {
    // display new elements
    store.disposeOldHosts()
    delete store.disposeOldHosts;
    // anything you need done the component is removed
  }
}

export function main() {
  return platformBrowserDynamic().bootstrapModule(MainModule)
    // use `hmrModule` or the "@angularclass/hmr-loader"
    .then((ngModuleRef: any) => {
      // `module` global ref for webpackhmr
      // Don't run this in Prod
      return hmrModule(ngModuleRef, module);
    });
}

// boot on document ready
bootloader(main);

```

`bootloader` 只需要探测到圆顶就已经准备好了 然后再用靴子去绑 这是需要的,因为那个多姆在重新装入时已经准备好了.

## 重要助手

-   **删除NgStyles**: 删除角样式
-   **创建新屋并处理旧屋**: 重新创建用于拖曳的根元素
-   **卸货机**: 已准备好的文档或已准备好的文档
-   **创建输入传输器** 财务报告和审定财务报表 **恢复输入值**: 替换时传输输入 DOM 状态

## 生产

在生产中,你只需要装货机 这样做:

```typescript
export function bootloader(main) {
  if (document.readyState === 'complete') {
    main()
  } else {
    document.addEventListener('DOMContentLoaded', main);
  }
}
```

你会用正常的方式,在生产中, 在Dom准备好了之后, 拖住你的应用。 另外,在生产过程中,你应该移除装载器:

* * *

## @NGRX/平面 (NGRX 4.x.x) (中文(简体) )

要钩入NGRX 4,你只需要提供一个减速器来设定状态,并将其纳入你的开发元减速器.

```typescript
// make sure you export for AoT
export function stateSetter(reducer: ActionReducer<any>): ActionReducer<any> {
  return function(state: any, action: any) {
    if (action.type === 'SET_ROOT_STATE') {
      return action.payload;
    }
    return reducer(state, action);
  };
}
```

在你的根减少器中,你可以做类似的事情 把它包含在你的 `metaReducers`。 。 。 . 您应该进入这里的环境, 并且只将它包含在开发中.

```typescript
/**
 * By default, @ngrx/store uses combineReducers with the reducer map to compose
 * the root meta-reducer. To add more meta-reducers, provide an array of meta-reducers
 * that will be composed to form the root meta-reducer.
 */
export const metaReducers: ActionReducer<any, any>[] = [stateSetter]
```

简而言之,把减速器给 `StoreModule` 和你的hmr钩入.

```typescript
 StoreModule.forRoot(reducers, { metaReducers }),
```

享受.. **帕特里克·贾斯**

## 常见问题

### @angularclass/hmr 是什么？

角-hmr:Web包装和角的热模块替换

### 如何安装 @angularclass/hmr？

在项目目录运行 npm install @angularclass/hmr，或使用 pnpm add / yarn add / bun add。

### @angularclass/hmr 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @angularclass/hmr 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @angularclass/hmr 可以商用吗？

@angularclass/hmr 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @angularclass/hmr 的下载量有多少？

根据 npm 官方下载统计，@angularclass/hmr 在 2026/10/06 – 2026/11/04 这 30 天内被下载 186,931 次，日均约 6,231 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @angularclass/hmr 还在维护吗？

最新版本 3\.0\.0 发布于 2020/08/31（6 年前）；至今共发布 11 个版本，其中过去 12 个月发布了 0 个；首次发布于 2016/08/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。