Angular应用加载时默认路由无法正确加载问题求助

我明白这种卡了一天半还没头绪的感觉真的太闹心了！咱们一步步来揪出这个路由重定向的问题根源——从你描述的路径重复情况来看，大概率是应用根路径配置或者默认路由规则出了问题。

首先检查基础路径配置（baseHref） #

Angular的<base>标签和build配置里的baseHref是决定应用根路径的核心，一旦配置错了，路由就会乱拼接：

• 打开项目根目录的index.html，确认<base>标签的href值是否正确：

  <base href="/ControlTower/NICK/UI/">
  

  这个值必须和你的应用部署路径完全一致，它告诉Angular“我的根在这里”。
• 再检查angular.json里的构建配置，找到对应项目的build.options，确认baseHref和上面的标签值一致：

  "architect": {
    "build": {
      "options": {
        "baseHref": "/ControlTower/NICK/UI/",
        // 其他配置...
      }
    }
  }
  

  如果你是用ng build打包的，这个配置会自动替换index.html里的base href，所以两者要保持统一。

然后检查默认路由的重定向规则 #

接下来看你的路由配置（一般是app-routing.module.ts），默认路由的写法很容易踩坑：

• 正确的默认重定向应该是这样的：

  const routes: Routes = [
    // 当访问根路径时，重定向到应用的根路由（注意是单斜杠/）
    { path: '', redirectTo: '/', pathMatch: 'full' },
    // 你的其他路由配置...
  ];
  
  @NgModule({
    // 确保开启了哈希模式（和你URL里的#对应）
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

  ❌ 绝对不要把redirectTo写成完整路径'/ControlTower/NICK/UI/'——因为baseHref已经帮你处理了根路径，再写完整路径就会导致Angular把路径重复拼接，也就是你看到的/#/ControlTower/NICK/UI/这种错误路径。

最后试试清除缓存 #

有时候浏览器缓存的旧路由配置会干扰新配置，试试用无痕模式打开页面，或者手动清除浏览器缓存后再测试。

如果这些排查后还没解决，你可以补充一下你的app-routing.module.ts代码、angular.json的build配置片段，或者部署服务器的相关信息，咱们再深入挖！

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