Angular 16：CanActivateFn守卫注入非单例服务问题求助

问题核心 #

你遇到的是函数式守卫(CanActivateFn)中服务实例重复创建的问题，根源通常是注入方式错误、重复注册服务或注入器层级冲突导致的。以下是具体解决步骤：

1. 修正守卫的服务注入方式 #

函数式守卫必须使用Angular内置的inject()函数获取服务，禁止手动实例化服务，否则会直接创建新实例。

• 错误示例：

  export const AllContentGuard: CanActivateFn = () => {
    const authService = new AuthService(); // 手动创建导致多实例
    // ...逻辑代码
  };
  

• 正确写法：

  import { inject } from '@angular/core';
  import { CanActivateFn } from '@angular/router';
  import { AuthService } from './auth.service';
  
  export const AllContentGuard: CanActivateFn = () => {
    const authService = inject(AuthService); // 通过inject获取根单例服务
    // ...逻辑代码
  };
  

2. 移除重复的服务提供者 #

即使服务声明了@Injectable({providedIn: 'root'})，如果在app.component或其他模块/组件的providers数组中再次注册该服务，会强制创建新的实例。

• 检查app.component.ts，移除其中的服务注册：

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    // 移除这一行（如果存在）
    // providers: [AuthService]
  })
  export class AppComponent {}
  

• 同时确保所有特性模块的providers数组中也没有重复注册AuthService。

3. 确保守卫使用根注入器解析 #

函数式守卫默认由根注入器处理，但如果你的守卫是通过特性模块的providers注册为令牌使用，可能会触发子注入器创建新实例。路由配置中直接引用守卫函数即可：

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AllContentGuard] // 直接引用函数，而非令牌
  }
];

4. 检查延迟加载模块的影响 #

如果受保护路由属于延迟加载模块，需确保该模块的providers中没有注册AuthService。延迟加载模块拥有独立注入器，重复注册会导致新实例，完全依赖providedIn: 'root'的根注入器即可避免。

5. 验证单例生效 #

可以在AuthService中添加实例追踪代码，确认是否仅创建一次：

@Injectable({providedIn: 'root'})
export class AuthService {
  private static instanceCount = 0;
  public instanceId: number;

  constructor() {
    AuthService.instanceCount++;
    this.instanceId = AuthService.instanceCount;
    console.log(`AuthService 实例创建：${this.instanceId}`);
  }
}

运行应用后，控制台如果仅打印一次日志，说明单例已生效。

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