Angular中NullInjectorError(R3InjectorError)问题排查求助

错误根源分析 #

从错误堆栈和你的路由代码来看，问题出在路由resolve配置的写法错误。你直接在resolve里用箭头函数调用inject()，但路由配置是在模块初始化前执行的，此时Angular的注入上下文还没建立，inject()找不到服务提供者，所以抛出NullInjectorError。

修复步骤 #

1. 重构路由resolve逻辑

Angular的resolve配置只接受两种合法值：实现了Resolve接口的服务类，或者包含provide和useClass/useFactory的提供者对象。不能直接写顶层箭头函数调用inject()。

推荐的正确写法是创建专门的解析器服务：

// 创建RecipeResolver服务
@Injectable({ providedIn: 'root' })
export class RecipeResolver implements Resolve<any> {
  constructor(
    private httpService: HttpService,
    private recipeService: RecipeService
  ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.httpService.fetchRecipes();
    return this.recipeService.getRecipes()[route.params['id']];
  }
}

// 创建RecipesDataResolver服务
@Injectable({ providedIn: 'root' })
export class RecipesDataResolver implements Resolve<any> {
  constructor(private httpService: HttpService) {}

  resolve() {
    return this.httpService.fetchRecipes();
  }
}

然后修改路由配置：

const appRoutes: Routes = [
    {
        path: 'recipes',
        component: RecipesComponent,
        resolve: { data: RecipesDataResolver },
        children: [
            {path: 'new', component: RecipiesEditComponent},
            {
                path: ':id',
                component: RecipeDetailComponent, 
                resolve: { detail: RecipeResolver }
            },
            {
                path: ':id/edit', 
                component: RecipiesEditComponent, 
                resolve: { data: RecipesDataResolver }
            }
        ]
    },
    {
        path: 'shoppinglist',
        component: ShoppingListComponent
    },
    {
        path: 'auth',
        component: AuthComponent
    }
]

2. 验证服务的注入配置

虽然你用了@Injectable({providedIn: 'root'})，但还是要检查：

• HttpService和RecipeService是否正确添加了该装饰器，没有拼写错误
• 服务文件是否正确导出（providedIn: 'root'会自动注册，这一步一般不会出问题，但还是要确认）

3. 逐步排查定位

如果不确定哪个resolve出问题，可以先注释掉所有resolve配置，启动项目看错误是否消失，再逐个恢复resolve，定位具体出错的路由。

错误堆栈关键提示 #

堆栈里的getTokenOrFunctionIdentity (router.mjs:3086:29)和getResolver (router.mjs:4026:22)已经明确指向路由解析器的问题，所以优先排查路由的resolve配置。

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