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

Question

我正在开始一个关于 Angular 的教程（我是一个 React 开发者），我只是用“ng new my-first-app”创建了一个新项目。问题是，热模块重新加载由于某种原因在我开始修改例如“app-component.html”并在 html 元素内包含各种随机文本后几秒钟就停止工作，例如“\Hello dsdhs shdsd {{title}}” \”，我不明白为什么，然后我必须执行 ctrl+c 并重新运行才能看到最新的更改。当发生这种情况时，我可以在终端中看到“正在重新加载客户端”：

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

这可能是与 Angular v17 有关的问题吗？如果是，那么我怎样才能轻松降级（比如说 v16）所有与 Angular 相关的依赖项？

欲了解更多信息：

• 我使用的是 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
  }
}

提前谢谢您！

Answer 1

这似乎是一个有待修复的角度版本问题，降级到上一个版本（16.2.0）并没有重现相同的问题。

Answer 2

好像是版本错误。我也面临着同样的问题，我来自 Angular 背景仍然无法解决这个问题。重新保存该应用程序可以暂时消除该问题。等待下一个版本解决这个问题。