如何修复Angular中'Uncaught Error: Can't resolve all parameters for AuthService: (?)'错误

嗨，我看了你遇到的问题——终端启动没报错，但浏览器控制台抛出了Uncaught Error: Can't resolve all parameters for AuthService: (?)，结合你最后导入JwtHelperService的操作，我帮你梳理下问题和解决办法：

核心问题分析 #

最明显的错误是你在auth.service.ts里把@Injectable()装饰器放错位置了！它应该放在类定义的上方，而不是类内部的private decodedToken属性上面。这个装饰器是告诉Angular“这个类是可注入的服务”，位置错了的话，Angular编译器无法正确识别服务的构造函数依赖（比如你用的HttpClient），自然就解析不了参数了。

另外还有两个需要注意的点：

1. 你的AuthService用到了HttpClient，必须确保根模块（AppModule）里导入了HttpClientModule，否则依赖注入也会失败。
2. 你直接实例化JwtHelperService的方式不太符合Angular的依赖注入规范，建议改成注入的方式，这样更灵活也更易维护。

修正步骤及代码示例 #

1. 修正AuthService的@Injectable()位置并优化JwtHelperService的使用

把@Injectable()移到类的上方，同时通过构造函数注入JwtHelperService，还要注意Angular 6+之后RxJS的操作符需要用pipe包裹：

import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { JwtHelperService } from "@auth0/angular-jwt";
import { map } from "rxjs/operators";
import { HttpClient } from "@angular/common/http";

// 把@Injectable()放在类定义的上方
@Injectable()
export class AuthService {
 private decodedToken;

 // 通过构造函数注入JwtHelperService，替代直接实例化
 constructor(private http: HttpClient, private jwtHelper: JwtHelperService) {}

 public register(userData: any): Observable<any> {
 return this.http.post("/api/v1/users/register", userData);
 }

 public login(userData: any): Observable<any> {
 // Angular 6+推荐用pipe包裹RxJS操作符
 return this.http.post("/api/v1/users/auth", userData).pipe(
 map(token => {
 return this.saveToken(token);
 })
 );
 }

 private saveToken(token): string {
 // 这里注意token的结构，确保你拿到的token对象里有token字段
 this.decodedToken = this.jwtHelper.decodeToken(token.token);
 localStorage.setItem("bwm_auth", token.token);
 localStorage.setItem("bwm_meta", JSON.stringify(this.decodedToken));
 return token;
 }
}

2. 确保根模块导入HttpClientModule

打开app.module.ts，添加HttpClientModule到imports数组中：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from '@angular/common/http'; // 导入这个模块
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
 declarations: [AppComponent],
 imports: [
 BrowserModule,
 HttpClientModule, // 加入到这里
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

为什么这样能解决问题？ #

• @Injectable()放在类上方后，Angular能正确识别这是一个可注入服务，进而解析构造函数里的HttpClient和JwtHelperService依赖。
• 导入HttpClientModule是HttpClient能被注入的前提，这个模块提供了HttpClient的实例。
• 改用注入JwtHelperService的方式，符合Angular的依赖注入模式，也方便后续测试或替换服务实现。

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