Angular懒加载路由映射异常：/search路由配置后失效

嘿，我之前也踩过类似的懒加载路由坑，咱们一步步来排查，大概率能找到问题所在：

1. 先查根路由的懒加载配置是否正确 #

你之前非懒加载模式下，应该是直接把EXAMPLE_ROUTES展开在根路由里对吧？改成懒加载后，根路由的写法完全不一样，要是这里写错了，很容易搅乱整个路由匹配逻辑，影响到/search这种全局路由。

错误的旧写法（非懒加载）：

// app-routing.module.ts
import { ExampleModule } from './example/example.module';
import { EXAMPLE_ROUTES } from './example/example.routes';

const routes: Routes = [
  ...EXAMPLE_ROUTES, // 直接导入模块路由
  { path: 'search', component: SearchComponent },
  // 其他路由
];

正确的懒加载写法：

// app-routing.module.ts
const routes: Routes = [
  { 
    path: 'example', // 这里是懒加载模块的根路径
    loadChildren: () => import('./example/example.module').then(m => m.ExampleModule) 
  },
  { path: 'search', component: SearchComponent }, // 全局路由放在前面更稳妥
  // 其他路由
];

这里要特别注意：懒加载模块内部的路由不要加example前缀！比如你的EXAMPLE_ROUTES应该写成这样：

// example.routes.ts
export const EXAMPLE_ROUTES: Routes = [
  { path: '', component: ExampleHomeComponent }, // 对应访问路径 /example
  { path: 'detail', component: ExampleDetailComponent }, // 对应 /example/detail
];

要是你在模块路由里也写了path: 'example'，那实际访问路径就变成/example/example了，还可能和其他路由冲突。

2. 检查路由的匹配顺序 #

Angular路由是从上到下按顺序匹配的，要是你把懒加载模块的路由放在了/search前面，而且懒加载模块里有模糊匹配（比如空路径path: ''或者通配符path: '**'），就会把/search给拦截了。

比如这种错误顺序：

const routes: Routes = [
  { 
    path: '', 
    loadChildren: () => import('./example/example.module').then(m => m.ExampleModule) 
  },
  { path: 'search', component: SearchComponent }, // 这里会被上面的空路径路由优先匹配
];

解决办法很简单：把具体的全局路由（比如/search）放在懒加载模块路由的前面，或者确保懒加载模块的路由不会覆盖全局路由。另外，懒加载模块里尽量别用path: '**'，真要用的话，得把它放在根路由的最后面。

3. 确认懒加载模块的路由配置用对了forChild #

这个是新手常犯的错：懒加载的子模块里，必须用RouterModule.forChild(EXAMPLE_ROUTES)，而不是forRoot！forRoot只能在根模块（AppModule）里用，子模块用forRoot会导致路由服务重复初始化，各种奇怪的路由问题都会找上门。

正确的模块配置：

// example.module.ts
import { RouterModule } from '@angular/router';
import { EXAMPLE_ROUTES } from './example.routes';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(EXAMPLE_ROUTES) // 划重点：forChild！不是forRoot！
  ],
  declarations: [ExampleHomeComponent, ExampleDetailComponent]
})
export class ExampleModule { }

4. 排查路由守卫的干扰 #

要是你给懒加载模块加了CanLoad守卫，或者全局路由有CanActivate守卫，可能是守卫逻辑出问题了——比如守卫返回了false，或者异步逻辑没处理好，导致/search路由被意外拦截。

你可以先把所有路由守卫注释掉，测试/search能不能正常访问。要是恢复正常了，再逐个排查守卫的逻辑，看看是不是哪里判断错了。

5. 看浏览器控制台的错误提示 #

别忽略浏览器控制台！打开F12看看有没有Angular路由相关的错误，比如“Cannot match any routes”（路由匹配失败）或者模块加载失败的错误，这些提示能直接帮你定位问题。

比如要是控制台显示Error: Cannot find module './example/example.module'，那就是懒加载的模块路径写错了，改一下loadChildren里的路径就行。

要是这些步骤都试过了还是有问题，把你的根路由配置、懒加载模块的路由代码贴出来，我再帮你细查。

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