Angular6-hmr开发配置

最新推荐文章于 2025-06-05 11:20:41 发布

王秦

最新推荐文章于 2025-06-05 11:20:41 发布

阅读量2.4k

点赞数 1

分类专栏： Angular2+ 文章标签： Angular6 NG6 Hmr 热替换

Angular2+ 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Angular项目中配置热模块替换(HMR)，包括环境文件的设置、构建和服务配置、依赖安装及主文件调整等步骤，实现代码更改后的快速预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A：什么是HMR？

Q：HMR（热替换）用于在运行的应用程序中更新代码而不需要重建它。这将导致更快的更新和更少的全页重新加载。

创建HMR的环境

在environments文件夹中新建 src/environments/environment.hmr.ts，内容分别配置为：

export const environment = {
production: false,
hmr: true
};

将 src/environments/environment.prod.ts 中设置属性hmr: false ，

export const environment = {
production: true,
hmr: false
};

将 src/environments/environment.ts 中设置属性hmr: false ，

export const environment = {
production: false,
hmr: false
};

将angular.json文件中配置HMR环境，并在构建和服务中添加配置以启用HMR。

Tip:<project-name>这里表示在angular.json中添加此配置的项目的名称。

  "build": {
    "configurations": {
      ...
      "hmr": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.hmr.ts"
          }
        ]
      }
    }
  },
  ...
  "serve": {
    "configurations": {
      ...
      "hmr": {
        "hmr": true,
        "browserTarget": "<project-name>:build:hmr"
      }
    }
  }

在 src/tsconfig.app.json中添加types必要的类型

{
  ...
  "compilerOptions": {
    ...
    "types": ["node"]
  },
}

在终端中执行以下命令，即可将项目以hmr环境运行

ng serve --configuration hmr

或者在package.json文件中添加script对象，用来便捷启动程序：

"scripts": {
  ...
  "hmr": "ng serve --configuration hmr"
}

添加@ angurlarclass/HMR依赖

为了使HMR工作，我们需要安装依赖项并配置我们的应用程序来使用它，

$ npm install --save-dev @angularclass/hmr

创建 src/hmr.ts文件，内容如下:

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 makeVisible = createNewHosts(elements);
    ngModule.destroy();
    makeVisible();
  });
};

将原src/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 is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
} else {
  bootstrap().catch(err => console.log(err));
}

以上步骤配置完成，终端执行hmr命令，

$ npm run hmr

当在控制台中看到以下提醒时，说明hmr已经在工作啦～！

NOTICE Hot Module Replacement (HMR) is enabled for the dev server.