Angular5+Firebase项目推GitHub后运行显示初始页面，如何解决？

我来帮你排查这个问题，这种情况通常是几个常见原因导致的，咱们一步步来解决：

1. 确认你克隆的是正确的分支

   • 很多开发者会把初始Angular项目放在默认分支（比如main/master），而实际开发代码在专门的分支（比如dev）。你可以先在GitHub仓库页面确认分支列表，再在本地切换到正确分支：

     git branch -a # 查看所有远程分支
     git checkout <你的开发分支名>
     

   • 切换后检查src目录下的代码，确认是你自己开发的内容，而非Angular默认的"Welcome to app!"模板文件。

2. 验证本地代码与GitHub仓库的一致性

   • 打开本地项目的src/app目录，查看核心文件（比如app.component.ts、app.component.html）是否是你写的代码。如果还是初始模板，可能是你提交到GitHub的代码不完整，或者克隆过程出了问题——可以尝试重新克隆仓库，或检查GitHub仓库里的src目录是否包含所有你的开发文件。

3. 确保依赖安装完全且无报错

   • 运行npm install时，留意终端有没有红色报错。Angular5的依赖版本较旧，容易出现安装失败的情况，可尝试以下操作：

     rm -rf node_modules package-lock.json # 删除现有依赖和锁文件
     npm install --legacy-peer-deps # 用该参数解决旧版本依赖冲突
     

   • 安装完成后确认node_modules目录存在且完整。

4. 匹配Angular CLI版本

   • Angular5对应的CLI版本是1.5.x，如果本地CLI版本过高（比如v10+），会导致构建异常甚至加载默认模板：
     • 查看本地CLI版本：ng --version
     • 安装对应版本的CLI（全局+本地项目）：

       npm install -g @angular/cli@1.5.6 # 全局安装指定版本
       npm install @angular/cli@1.5.6 --save-dev # 本地项目安装指定版本
       

5. 检查Angular5配置文件（.angular-cli.json）

   • Angular5使用.angular-cli.json而非新版的angular.json，打开这个文件检查apps数组的核心配置：
     • main：确认指向src/main.ts（一般没问题，但路径要正确）
     • appRoot：默认是app，确保你的根组件选择器（app.component.ts里的selector: 'app-root'）和这个一致
     • index：确认是src/index.html

6. 清理缓存并重新构建

   • 浏览器缓存或Angular构建缓存可能导致显示旧页面，尝试：

     ng build --prod # 构建生产版本清理缓存
     ng serve --open --no-cache # 启动开发服务器时禁用缓存
     

   • 同时在浏览器按Ctrl+Shift+R强制刷新，清除浏览器缓存。

7. 检查路由配置

   • 如果你的项目用了路由，打开src/app/app-routing.module.ts，确认默认路由指向的是你的主页组件，而非初始模板组件：

     // 避免这种情况：
     { path: '', component: WelcomeComponent }
     // 应该指向你的主组件：
     { path: '', component: YourMainComponent }
     

如果以上步骤都试过仍未解决，建议检查GitHub仓库的提交记录，确认你确实把所有修改的代码（包括src目录和配置文件）都推送到仓库了。

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