ASP.NET Core 2升级Angular5后热模块替换失效报错问题

这个问题我之前处理过，核心原因是热模块替换（HMR）过程中旧的Angular平台实例没有被正确销毁，导致新实例启动时出现配置冲突，抛出Error: A platform with a different configuration has been created. Please destroy it first错误。下面是针对性的解决方案：

1. 修复HMR的平台销毁逻辑 #

首先检查你的main.ts和hmr.ts文件，确保在模块热替换时能正确销毁旧的Angular平台实例：

修改main.ts #

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();
}

// 封装bootstrap逻辑，方便HMR调用
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module['hot']) {
    // 启用HMR引导
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR未在webpack-dev-server中启用！');
    console.log('你是否在ng serve时添加了--hmr参数？');
  }
} else {
  bootstrap().catch(err => console.error(err));
}

修改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实例
    ngModule.destroy();
    makeVisible();
  });
};

2. 配置正确的HMR启动命令 #

检查你的package.json中的scripts，添加或修改HMR启动脚本：

"scripts": {
  "start": "ng serve --hmr -e=hmr",
  "test": "karma start ClientApp/test/karma.conf.js"
  // 其他脚本保持不变
}

同时确保environments/environment.hmr.ts中启用HMR：

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

3. 清理依赖缓存并重新安装 #

有时候依赖版本冲突或缓存问题也会导致HMR异常，执行以下步骤：

• 删除node_modules文件夹：

  # Windows系统
  rmdir /s /q node_modules
  # macOS/Linux系统
  rm -rf node_modules
  

• 清理npm缓存：

  npm cache clean --force
  

• 重新安装依赖：

  npm install
  

4. 确认Angular CLI版本兼容性 #

你的@angular/cli版本是^1.7.4，这个版本和Angular 5.2.10是兼容的，但建议将版本固定为1.7.4（去掉^），避免npm自动升级到更高版本导致不兼容：

"devDependencies": {
  "@angular/cli": "1.7.4",
  // 其他依赖保持不变
}

完成以上步骤后，重新启动应用，HMR应该就能正常工作，平台配置冲突的报错也会消失。

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