Angular 12.0.5 HMR 不工作，不重新加载模块，不重新加载页面（实时重新加载），Angular 11.0.6 重新加载整个页面

时间：2021-06-24 18:11:59

标签： angular webpack-dev-server hot-module-replacement

Angular HMR 不替换/重新加载组件

  • 实时重载适用于 11.0.6 和 12.1.0-next.6。
  • Angular 12.0.5 根本不会重新加载。
<块引用>

任何人都可以使用它并且可以提供一个有效的示例应用程序？

给定：一个简单的入门应用

（来自故事书 https://github.com/chromaui/intro-storybook-angular-template）

使用 Angular 11.0.6

然后 HMR 开箱即用并不能按预期工作，但完全重新加载可以（即启用 [WDS] 实时重新加载。）

更新到 Angular 12.0.5 时

然后 HMR 不会重新加载任何东西。 （根本没有实时重新加载）

<块引用>

12.0.5 行为：更新角度组件时不重新加载。

控制台错误（chrome）：

dev-server.js:60 Uncaught Error: [HMR] Hot Module Replacement is disabled.
    at Object.5033 (dev-server.js:60)
    at __webpack_require__ (bootstrap:19)
    at __webpack_exec__ (polyfills.js:12907)
    at polyfills.js:12908
    at webpackJsonpCallback (jsonp chunk loading:35)
    at polyfills.js:1
<块引用>

编辑组件 (HTML) 后，控制台“卡住”“[WDS] 应用热更新...”

更新到 Angular 12.1.0-next.6 时"

结果与 v11 相同（然后 HMR 开箱即用，但完全重新加载可以（即启用 [WDS] 实时重新加载。）

webpack-dev-server 是原因（可能与 webpack 5.3 一起）

经过一番挖掘，我意识到这与 webpack-dev-server 有关。

<块引用>

一个解决方案似乎是将 webpack 目标设置为 web（而不是浏览器）进行开发。或者使用测试版的 webpack-dev-server（即 4.0.0-beta.x）

"target: 'web',

调查 Angular 构建系统使用的版本

在“node_modules/@angular-devkit/build-webpack/package.json”中使用了 webpack-dev-server。

对于 "@angular-devkit/build-angular": "~12.0.5"，webpack-dev-server 版本为 3.11.2

<块引用>

"peerDependencies": { "webpack": "^5.30.0", "webpack-dev-server": "^3.11.2" },

将 Angular 更新为 v-next 时 对于 "@angular-devkit/build-angular": "^12.1.0-next.6"，webpack-dev-server 版本较低，为 3.1.4，与 'build-angular' v11 相同。 （可能是因为他们意识到实时重新加载的问题）

<块引用>

"peerDependencies": { "webpack": "^5.30.0", "webpack-dev-server": "^3.1.4" },

使用 Angular 11 时 对于“@angular-devkit/build-angular”：“~0.1100.6”

<块引用>

"peerDependencies": { "webpack": "^4.6.0", "webpack-dev-server": "^3.1.4" },

配置 webpack（使用 Angular 12.0.5 / next.6 时） - 没有帮助

根据以下资源配置，使用@angular-builders/custom-webpack

<块引用>

没有帮助。帮助！ =D

//package.json
"devDependencies": {
    "@angular-builders/custom-webpack": "^12.1.0",

//angular.json
//replace "builder" in "build" and "serve"
//add customWebpackConfig with path to a new config file
//"builder": "@angular-devkit/build-angular:browser"
    "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "extra-webpack.config.ts",
              "replaceDuplicatePlugins": true
           },
         //...
         //replace   "builder": "@angular-devkit/build-angular:dev-server",
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",

//extra-webpack.config.ts
import { Configuration } from "webpack";

export default {
    target:"web",
    // target: process.env.NODE_ENV === "development" ? "web" : "browserslist",  
} as Configuration;

1 个答案:

答案 0 :(得分：0)

我们有一些与您介绍的类似的东西。您是否删除了 package_lock、node_modules 并进行了全新安装？

在 Angular 11.2.4 和新的 Angular 12.1.4 项目中，使用 HRM 进行设置没有问题。 尝试使用 "@angular-builders/custom-webpack": "12.1.0", "@angular-devkit/build-angular": "^12.1.4" 它应该可以工作

相关问题
最新问题