Angular部署至Heroku后出现HMR未启用错误的原因咨询

说白了，你这是把开发环境才用的热模块替换（HMR）逻辑，不小心带到生产环境（Heroku部署的是生产构建）里了。HMR本来就是给ng serve --hmr用的，用来开发时改完代码实时刷新，生产环境根本不需要这玩意儿，也不会启动支持HMR的webpack-dev-server，所以浏览器一加载到相关代码就报错了。

具体看你的情况：

• 你的main.ts里直接导入了environment.hmr，这应该是你开发HMR时专门搞的环境配置文件；
• 但生产构建（比如ng build --prod）的时候，应该加载的是environment.prod.ts才对，结果你代码里硬编码成了HMR的环境，导致生产包里面带了HMR的逻辑；
• 生产环境里没有webpack-dev-server，更不可能开HMR，所以代码一检测到HMR相关的配置，就直接抛出这个提示了。

1. 把main.ts的逻辑改对，让HMR只在开发环境生效 #

别再硬导入environment.hmr了，改成根据环境自动判断。给你个标准的示例代码，你照着改：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// 生产环境就启用生产模式
if (environment.production) {
  enableProdMode();
}

// 只有开发环境下module.hot才会存在，这里处理HMR逻辑
declare const module: any;
if (module.hot) {
  module.hot.accept();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 确保Heroku用的是生产构建命令 #

打开你的package.json，检查scripts里的build命令是不是标准的生产构建：

"scripts": {
  "build": "ng build --prod",
  "start": "node server.js" // 如果你用了Express之类的服务器托管静态文件
}

Heroku部署时会自动跑npm run build，这个命令一定要是ng build --prod，不能带任何HMR相关的参数。

3. 检查angular.json的环境替换配置 #

确认angular.json里生产环境的配置，是把environment.ts替换成environment.prod.ts，而不是HMR的配置：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    // 其他生产相关配置...
  }
}

这么改完之后，生产构建的包就不会包含任何HMR相关的代码了，访问Heroku的URL时自然就不会报这个错啦。

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