修改app.component.html后仍显示Angular默认示例页的问题

修改页面后仍显示默认Angular示例页，核心原因有两个：

• 跨大版本依赖不兼容：从package.json配置能看到，项目所有Angular核心包（@angular/core、@angular/cli等）都是14.x版本，但你手动指定安装的@angular/material@13.1.1、@angular/cdk为13.x版本。Angular生态相关包必须和核心框架大版本完全对齐，跨大版本安装会导致ng add脚手架逻辑执行异常、构建缓存错乱、热更新完全失效等问题。
• 缓存残留：在版本不兼容状态下启动过开发服务后，Angular本地构建缓存、浏览器静态资源缓存都会留存旧的默认页面资源，哪怕你改了组件文件，热更新也不会触发内容替换。

另外你贴代码时标错了文件名：第一个带@NgModule装饰器的代码块实际是app.module.ts内容，不是app.component.ts，这个标注错误不影响代码运行，只是自己排查问题时容易搞混。

按顺序操作就能修复：

1. 先卸载版本不匹配的依赖，在项目根目录执行命令：

npm uninstall @angular/material @angular/cdk

2. 安装和Angular14版本匹配的Material组件库：

ng add @angular/material@14

如果你一定要用13.x版本的Angular Material，必须把整个项目所有Angular核心包全部降级到13.x版本，否则兼容问题不可能解决。

3. 彻底停掉当前正在运行的ng serve进程，删除项目根目录下的.angular文件夹（Angular本地构建缓存目录），重新安装依赖：

npm install

4. 重新启动开发服务：

ng serve

5. 打开浏览器访问项目地址时，按Ctrl+F5强制刷新清空浏览器缓存，就能看到你修改的页面内容了。

额外提醒：你在index.html的<app-root>标签外手动写的<h1>eewew</h1>不属于Angular组件渲染范围，会一直显示在页面上，不需要的话直接删掉这行即可。

内容的提问来源于stack exchange，提问作者stackoverarek