Angular 卡在“重新加载客户端”并且不刷新页面

Angular is stuck on "reloading client(s)" and not refreshing the page

提问人:Th3Guy 提问时间:11/15/2023 更新时间:11/20/2023 访问量:160

问:

我开始了一个关于 angular 的教程(我是一个 react 开发人员),我只是用“ng new my-first-app”创建了一个新项目。问题是,在我开始修改“app-component.html”后几秒钟,由于某种原因,热模块重新加载停止工作,例如“\<h1\>Hello dsdhs shdsd {{title}}\</h1\>”,我不知道为什么,然后我必须执行ctrl + c并重新运行才能看到最新的更改。在终端中,当这种情况发生时,我可以看到“正在加载客户端”:

'未更改的输出文件:2 应用程序包生成完成。[0.112 秒]正在加载客户端... '

这可能是与 angular 的 v17 有关的问题吗?如果是,那么我怎样才能轻松地将所有与 angular 相关的依赖项降级到 v16?

欲了解更多信息:

  • 我正在使用 node v20.9.0 和 npm v10.2.3
  • 请检查package.json:
{
  "name": "my-first-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "rxjs": "\~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "\~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "\~5.1.0",
    "jasmine-core": "\~5.1.0",
    "karma": "\~6.4.0",
    "karma-chrome-launcher": "\~3.2.0",
    "karma-coverage": "\~2.2.0",
    "karma-jasmine": "\~5.1.0",
    "karma-jasmine-html-reporter": "\~2.1.0",
    "typescript": "\~5.2.2"
  }
}

这也是tsconfig.json文件:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": \[
      "ES2022",
      "dom"
    \]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

先谢谢你!

节点.js npm 刷新

评论

0赞 Matthieu Riegler 12/7/2023
修复程序已经登陆,它能解决您的问题吗?17.0.6

答:

0赞 Th3Guy 11/15/2023 #1

这似乎是一个有待修复的 angular 版本问题,降级到上一个 (16.2.0) 并没有重现相同的问题。

0赞 Siddharth Tiwari 11/18/2023 #2

解决方法是,重新保留应用程序可暂时消除该问题。

我也怀疑这是一个错误,并希望/希望它在下一个版本中得到修复。

评论

0赞 possum 11/20/2023
这并不能真正回答这个问题。如果您有其他问题,可以通过单击“提问”来提问。要在此问题获得新答案时收到通知,您可以关注此问题。一旦你有足够的声誉,你还可以添加赏金来吸引更多人关注这个问题。- 从评论
0赞 Alexandru Contu 11/25/2023 #3

我同意其他两个答案。我在 Angular 版本 17.0.0 上遇到了同样的问题。

我现在看到的唯一解决方法是重新提供您的应用程序。

我看到你也提到要降级。由于您刚刚开始并想尝试使用 Angular,因此您可以完全卸载并重新安装早期版本。

npm uninstall -g angular-cli

npm cache clean

npm install -g angular-cli@your_desired_version

沿着这些思路的东西应该可以解决问题。我敢打赌,还有其他一些方法可以降级 cli 并相应地更新项目配置,但我真的认为这对您来说没有意义。