添加子路由到受TokenGuard保护的路由时出现「Error no provider for TokenGuard」错误

看起来你遇到的问题核心是TokenGuard没有被Angular的依赖注入系统正确注册，导致路由尝试调用它时找不到对应的服务实例。添加子路由后触发了这个报错，是因为子路由的canActivateChild也会尝试调用TokenGuard，而此时Guard还没完成注册。

问题根源 #

你的TokenGuard类虽然添加了@Injectable()装饰器，但没有指定服务的提供方式——Angular依赖注入系统需要明确知道该如何创建这个Guard的实例，否则就会抛出找不到提供者的错误。

解决方案1：使用providedIn: 'root'（推荐） #

直接修改TokenGuard的@Injectable装饰器，指定它在根注入器中提供，这样整个应用都能访问到这个Guard实例：

import {StartpageService} from 'startpage.service';
import {Injectable} from '@angular/core';
import {CanActivate, Router,ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild} from '@angular/router';

@Injectable({
  providedIn: 'root' // 新增这一行，指定根注入器提供服务
})
export class TokenGuard implements CanActivate, CanActivateChild {
  constructor(
    private startPageService: StartpageService,
    private router: Router
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.startPageService.validateToken();
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.canActivate(route, state);
  }
}

解决方案2：在模块的providers数组中注册 #

如果你不想使用根注入器，可以在对应的NgModule（比如路由模块或AppModule）的providers数组里手动添加TokenGuard：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TokenGuard } from './path-to-token-guard'; // 替换成你的TokenGuard实际路径
// 其他组件/服务导入...

const routes: Routes = [
  // 你的路由配置内容...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [TokenGuard] // 在这里注册TokenGuard
})
export class AppRoutingModule { }

额外注意点 #

你提到Startpage组件原本是无需登录即可访问的，但当前路由配置里给它加了canActivate: [TokenGuard]和canActivateChild: [TokenGuard]，这会导致Startpage和它的子路由都需要登录验证。如果这不是你的预期，记得移除这两个配置，让Startpage恢复无需登录的状态：

{
  path: 'startpage',
  // 移除这两行：canActivate: [TokenGuard], canActivateChild: [TokenGuard],
  component: StartpageComponent,
  children: [
    { path: 'messages', component: MessagesComponent }
  ]
}

完成上述修改后，重新启动应用，应该就能解决"no provider for TokenGuard"的错误了。

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