如何从Angular库导出功能性守卫并解决inject注入错误

一、解决NG0203错误的核心方法 #

你遇到的错误是因为调用守卫的时机不对，导致inject()不在Angular的注入上下文里执行。不管用工厂函数还是直接导出常量守卫，关键是让Angular来管理守卫的执行时机：

1. 工厂函数写法（你当前的方案） #

确保守卫代码结构正确，把inject()放在返回的守卫函数内部：

// authentication.guard.ts
import { CanActivateFn, inject } from '@angular/router';
import { AuthService } from './auth.service';

export function authenticationGuard(): CanActivateFn {
  // 不要在这里直接调用inject，把逻辑放在返回的函数里
  return (route, state) => {
    const authService = inject(AuthService);
    return authService.isAuthenticated();
  };
}

在项目路由配置中使用时，不要加括号调用函数，直接传递函数引用：

{
  path: 'protected',
  component: ProtectedComponent,
  canActivate: [authenticationGuard] // 注意这里没有()
}

加括号会导致工厂函数在注入上下文外被执行，里面的inject()自然触发NG0203错误。

2. 直接导出常量守卫（更简洁的方案） #

之前“无法从库中导出常量”的说法不准确，只要是Angular CLI创建的标准库，直接导出CanActivateFn常量完全可行：

// authentication.guard.ts
import { CanActivateFn, inject } from '@angular/router';
import { AuthService } from './auth.service';

export const authenticationGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  return authService.isAuthenticated();
};

在public-api.ts中正常导出：

export * from './lib/authentication.guard';

项目中使用时直接引用常量即可：

canActivate: [authenticationGuard]

二、文件名是否合适？ #

authentication.guard.ts完全符合Angular的命名规范，守卫类/函数文件通常以.guard.ts后缀结尾，名称清晰体现了守卫的功能，没有问题。

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