Angular4带路由守卫的懒加载模块动态路由配置及错误解决

看起来你遇到了两个典型的Angular路由问题：子路由匹配异常导致组件重复显示，以及路由守卫的注入错误。我来一步步帮你解决：

1. 解决路由路径导致的组件重复显示问题 #

你的子路由路径全部以斜杠/开头，这是Angular路由配置的大忌！

在Angular中，子路由的路径如果以/开头，会被识别为绝对路径，而不是基于父路由的相对路径。你的父路由是path: ''（对应根路径加载模块），这些带/的子路由实际上没有正确挂载到父路由下，导致路由匹配逻辑混乱，最终所有路径都匹配到了同一个组件。

修正后的路由配置（mycomponent.routing.ts） #

import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './path-to-your-auth-guard'; // 确保正确导入守卫
import { MyComponent1 } from './my-component1.component';
// ... 导入其他组件

const routes: Routes = [
 {
 path: '',
 canActivate: [AuthGuard],
 canActivateChild: [AuthGuard],
 children: [
 { path: 'my-todos', component: MyComponent1 }, // 去掉开头的/
 { path: 'edit-my-todo/:tid', component: MyComponent2 },
 { path: 'edit-my-todo/single-todo/:tid', component: MyComponent2 },
 { path: 'edit-my-todo/multi-todo/:tid', component: MyComponent2 },
 { path: 'add-todo', component: MyComponent3 },
 { path: 'multiple-todo-details/:tid', component: MyComponent4 },
 { path: 'todo/:alias', component: MyComponent5 },
 { path: 'todo-preview/:tid', component: MyComponent5 },
 ]
 },
];

export const routing = RouterModule.forChild(routes);

2. 解决"Guard is not a function"错误 #

这个错误通常由以下几种原因导致，逐一排查：

原因1：AuthGuard未正确使用@Injectable装饰 #

Angular的服务（包括路由守卫）必须用@Injectable装饰才能被注入。如果你的守卫没有这个装饰器，Angular无法识别它为可注入的服务，就会抛出这个错误。

原因2：AuthGuard未正确注册 #

你需要确保守卫要么在根模块（AppModule）的providers中注册，要么在守卫类中使用providedIn: 'root'实现树摇优化，或者在当前的MyComponentModule的providers中注册。

原因3：AuthGuard未正确实现canActivate/canActivateChild方法 #

守卫类必须实现对应的接口方法，并且返回值符合要求（Observable<boolean> | Promise<boolean> | boolean）。

正确的AuthGuard示例 #

import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // 推荐用这种方式，自动注册到根注入器
})
export class AuthGuard implements CanActivate, CanActivateChild {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 这里写你的鉴权逻辑，比如检查用户是否登录
    const isLoggedIn = true; // 替换成实际的鉴权判断
    if (!isLoggedIn) {
      // 如果未登录，可以跳转到登录页
      // return this.router.createUrlTree(['/login']);
      return false;
    }
    return true;
  }

  canActivateChild(
    childRoute: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 子路由守卫可以直接复用canActivate的逻辑
    return this.canActivate(childRoute, state);
  }
}

确保在模块中正确导入（如果不用providedIn: 'root'） #

如果你的守卫没有使用providedIn: 'root'，需要在MyComponentModule的providers中注册：

import { AuthGuard } from './path-to-your-auth-guard';

@NgModule({
 imports: [
 routing,
 SharedModule,
 CommentsModule,
 ],
 declarations: [
 MyComponent1,
 MyComponent2,
 MyComponent3,
 MyComponent4,
 MyComponent5,
 ],
 providers: [mycomponentService, AuthGuard] // 加入AuthGuard
})
export class MyComponentModule { }

最后验证 #

完成以上修改后，重启Angular应用：

• 访问/my-todos应该能正确显示MyComponent1
• 访问其他路径也会匹配到对应的组件
• 手动输入URL时，路由守卫会正常触发，不再抛出"Guard is not a function"错误

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