Angular Router搭配canActivate/redirectTo出现无尽循环问题

可行解决方案按优先级排查： #

1. 修正index.html的base href配置
   打开src/index.html，确认头部的base标签为：

   <base href="/">
   

   如果你当前写的是<base href="./">、<base href="">或者其他相对路径，直接修改为上述配置即可解决路径拼接、刷新后路由匹配错误的问题，你描述的/login跳转/login/home、静态资源404的核心诱因90%是该配置错误。

2. 检查路由模块导入逻辑
   确保全项目仅在根路由模块/根AppModule中调用一次RouterModule.forRoot(routes)，所有子特性模块的路由注册必须使用RouterModule.forChild(子路由配置)，重复调用forRoot会导致路由实例冲突，出现路由匹配逻辑异常。

3. 修正angular.json构建配置
   打开项目根目录的angular.json，找到对应项目的architect > build > options配置项：

   • 确认baseHref值为"/"
   • 确认没有手动配置非默认的deployUrl参数
     错误的构建路径配置会导致编译后的静态资源引用路径异常，触发刷新后的404问题。

4. 排查全局路由拦截逻辑
   检查AuthGuard、全局路由监听、AppComponent初始化逻辑中的跳转代码：

   • AuthGuard的拦截返回值必须是boolean/UrlTree类型，不要在Guard中直接调用router.navigate执行跳转，避免触发两次路由匹配
   • 删除全局NavigationStart/NavigationEnd事件中多余的强制跳转逻辑，避免冲突

5. 修正服务器路由回退配置
   你提到的访问路径自动补末尾斜杠、静态资源404的问题属于服务器配置错误：

   • 本地开发场景：删除angular.json中serve配置项的非默认自定义配置，重置后重新执行ng serve即可
   • 部署场景：如果用Nginx部署，必须在站点配置中添加路由回退规则：

   location / {
     try_files $uri $uri/ /index.html;
   }
   

以上排查完成后问题即可解决，不需要重建整个项目。

内容的提问来源于stack exchange，提问作者Luke Peña