代码编译成功但在浏览器中无法运行，页面空白求解决方案

1. 处理HTTPS证书信任问题 #

浏览器显示“Not secure”是因为本地自签名HTTPS证书不被信任，可通过以下方式解决：

• 临时访问：在Chrome类浏览器中，点击地址栏的“不安全”提示，选择「详细信息」→「继续前往localhost(不安全)」，强制访问后查看页面是否加载。
• 生成并信任本地证书：
  1. 用openssl生成证书（需先安装openssl工具）：

     openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
     

  2. 修改Angular项目配置：打开angular.json，在serve选项中添加证书路径：

     "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
         "ssl": true,
         "sslKey": "./key.pem",
         "sslCert": "./cert.pem"
       }
     }
     

  3. 将生成的cert.pem导入浏览器信任列表（在浏览器设置中搜索「证书管理」，按指引添加证书）。

2. 排查页面空白核心原因 #

• 查看控制台报错：按F12打开开发者工具，切换到「Console」标签，检查是否有组件加载失败、路由错误、依赖缺失等报错信息，根据提示定位问题。
• 检查路由配置：确保默认路由已绑定有效组件，比如在app-routing.module.ts中：

  const routes: Routes = [
    { path: '', component: HomeComponent },
    // 其他路由配置
  ];
  

• 确认根组件内容：检查app.component.html，确保包含<router-outlet></router-outlet>或基础展示内容，空模板会导致页面空白。
• 清除缓存重启服务：

  npm cache clean --force
  ng serve --ssl --open
  

3. 其他排查方向 #

• 更换端口启动：若4200端口被占用，换端口尝试：

  ng serve --ssl --port 4201 --open
  

• 重新安装依赖：删除node_modules和package-lock.json后重装：

  rm -rf node_modules package-lock.json
  npm install
  ng serve --ssl --open
  

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