当注入带有“httpclient”的服务时，Angular 16 Auth Guard 给出 Null Injector 错误

Question

我正在尝试为我的应用程序创建一个身份验证守卫。 我有一个具有多种功能的身份验证服务，“isAuthenticated”就是其中之一。 当我将其注入身份验证防护并尝试运行它时，出现以下错误。 当不使用 gaurd 时，httpclient 可以很好地工作。 我缺少什么？ Canactivate 也已被弃用，因此使用 CanActivateFn

回购

auth.guard.ts

import { inject } from '@angular/core';
import { CanActivateFn, Router, UrlTree } from '@angular/router';
import { AuthService } from 'src/app/services/auth/auth.service';

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

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  readonly api_url = 'http://localhost:8000/api/';

  constructor(private http: HttpClient) {}

  login(email: string, password: string) {
    ......
  }

  register(email: string, password: string) {
    ......
  }

  authCheck() {
    ......
  }

  isAuthenticated(): any {
    // this.authCheck().subscribe((data:any)=>{return data.message == "Authenticated"})
    return true;
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter,withHashLocation } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';


import { routes } from './app.routes';

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

app.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { PrimeNGConfig } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { HeaderComponent } from './core/header/header.component';
import { LoginComponent } from './pages/login/login.component';
import { HttpClientModule } from '@angular/common/http';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    ButtonModule,
    HeaderComponent,
    LoginComponent,
    HttpClientModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'e-commerce';
  constructor(private primengConfig: PrimeNGConfig) {}
  ngOnInit() {
    this.primengConfig.ripple = true;
  }
}

如有任何帮助，我们将不胜感激

我尝试在身份验证服务中注入 httpclient 仍然没有成功。

Answer 1

您需要将

provideHttpClient()

添加到

providers

的

bootstrapApplication

列表中。