我正在try 为我的应用程序创建身份验证保护. 我有一个具有多堆功能的身份验证服务，"isAuthenticated"就是其中之一. 当我将它注入auth Guard并try 运行它时，我得到以下错误. 当没有使用GUGUD时，HTTPS客户端工作得很好. 我错过了什么？ 此外，不推荐使用CanActivate，因此使用CanActivateFn

REPO个

enter image description here个

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;
  }
}

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

我已经try 在身份验证服务中注入HTTPClient，但仍然没有成功.