Angular独立组件路由守卫配置后AuthService注入错误解决

问题场景 #

在Angular独立组件项目中配置功能型路由守卫后，出现如下错误：

main.ts:5 ERROR NullInjectorError: NullInjectorError: No provider for _AuthService!.

相关代码如下：

路由定义（app.routes.ts） #

import { Routes } from '@angular/router';
import { domainGuard } from './guard-routes.service';
import { NotFoundComponent } from './notFound/not-found.component';
export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./home/home.component').then((m) => m.HomeComponent),
  },
  {
    path: 'users',
    loadComponent: () =>
      import('./user/user.component').then((m) => m.UserComponent),
  },
  {
    path: 'profile',
    loadComponent: () =>
      import('./profile/profile.component').then((m) => m.ProfileComponent),
  },
  { path: '**', component: NotFoundComponent },
].map((page: any) => {
  page.canActivate = [domainGuard];
  return page;
});

功能型路由守卫（guard-routes.service.ts） #

import { Router } from '@angular/router';
import { AuthService } from './auth.service';
import { inject } from '@angular/core';

export const domainGuard = () => {
  const router = inject(Router);
  const service = inject(AuthService);
  if (service.IsAuth()) {
    router.navigate(['/user']);
    return true;
  } else {
    router.navigate(['/profile']);
    return false;
  }
};

AuthService（auth.service.ts） #

import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  isLoggedIn = false;

  login() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.isLoggedIn = true;
      }, 3000);
    });
  }

  logOut() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.isLoggedIn = false;
      }, 3000);
    });
  }

  IsAuth() {
    return this.isLoggedIn;
  }
}

App配置（app.config.ts） #

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

解决方案 #

错误核心原因是AuthService未被注册到Angular依赖注入系统中。在独立组件应用模式下，没有NgModule来声明服务提供者，必须通过以下两种方式之一完成注册：

方式一：使用providedIn: 'root'（推荐） #

修改AuthService的@Injectable装饰器，添加providedIn: 'root'元数据，让Angular自动将服务注册为根级全局提供者：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' }) // 新增根级提供者配置
export class AuthService {
  isLoggedIn = false;

  login() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.isLoggedIn = true;
      }, 3000);
    });
  }

  logOut() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.isLoggedIn = false;
      }, 3000);
    });
  }

  IsAuth() {
    return this.isLoggedIn;
  }
}

方式二：在appConfig中手动注册提供者 #

如果不需要全局根级服务，可以在appConfig的providers数组中直接添加AuthService：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { AuthService } from './auth.service'; // 导入服务

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), AuthService], // 手动注册服务
};

原理说明 #

Angular独立组件模式下，依赖注入系统不再依赖NgModule的providers数组，服务必须显式声明提供者范围（通过providedIn）或直接在ApplicationConfig中注册，否则Angular无法找到服务实例，进而抛出NullInjectorError。

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