Angular 13搭配Bootstrap 5项目添加路由后UI全部消失无法加载问题

核心问题根因 #

你路由配置的写法不符合Angular规则，是导致UI全失的直接原因：
app-routing.module.ts 中路由定义的path字段不允许加前导斜杠，你写的{path: '/home', component: HomeComponent}属于错误写法。

修复步骤 #

1. 修改路由配置：
   把app-routing.module.ts中的路由替换为以下内容：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  // 后续可以补充其他页面的路由规则
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'portfolio', component: PortfolioComponent }
];

2. 修复导航项写法（可选，避免后续跳转异常）：
   把navi.component.html中其他导航项的href="#"替换为Angular路由写法，例如：

<li class="nav-item">
  <a routerLink="/about" class="nav-link">About</a>
</li>

3. 重启开发服务ng serve，打开浏览器F12控制台确认无报错即可。

其他验证点 #

• 确认home.component.html中有实际渲染内容，避免路由匹配成功后渲染空内容误以为加载失败。
• 确认没有删除app.component.html中的<app-navi></app-navi>和<router-outlet></router-outlet>标签。

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