提问人:Th3Guy 提问时间:11/15/2023 更新时间:11/20/2023 访问量:160
Angular 卡在“重新加载客户端”并且不刷新页面
Angular is stuck on "reloading client(s)" and not refreshing the page
问:
我开始了一个关于 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
}
}
先谢谢你!
答:
0赞
Th3Guy
11/15/2023
#1
这似乎是一个有待修复的 angular 版本问题,降级到上一个 (16.2.0) 并没有重现相同的问题。
0赞
Siddharth Tiwari
11/18/2023
#2
解决方法是,重新保留应用程序可暂时消除该问题。
我也怀疑这是一个错误,并希望/希望它在下一个版本中得到修复。
评论
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 并相应地更新项目配置,但我真的认为这对您来说没有意义。
评论
17.0.6