如何解决Angular 12.0.5 HMR 不工作,不重新加载模块,不重新加载页面实时重新加载,Angular 11.0.6 重新加载整个页面 调查 Angular 构建系统使用的版本配置 webpack使用 Angular 12.0.5 / next.6 时 - 没有帮助
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(使用 Angular 12.0.5 / next.6 时) - 没有帮助
根据以下资源配置,使用@angular-builders/custom-webpack
没有帮助。帮助! =D
- https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack#Custom-webpack-dev-server
- https://github.com/just-jeb/angular-builders/blob/master/packages/custom-webpack/examples/full-cycle-app/extra-webpack.config.ts
//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;
解决方法
我们有一些与您介绍的类似的东西。您是否删除了 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" 它应该可以工作
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。