如何解决“未捕获的错误：无法解析AuthService的所有参数：（？）。”

Question

this error occur when application is started. The terminal is not showing any error but in the browser console. The last action was i import JwtHelperService from '@auth0/angular-jwt'

The project is in Nodejs, express 4.16.4 and angular 7.2.0 I have included some code please help me to find the error thank you in advance

auth.service.ts

import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import "rxjs/Rx";
import { JwtHelperService } from "@auth0/angular-jwt";
import { map } from "rxjs/operators";
import "core-js/es7/reflect";

import { HttpClient } from "@angular/common/http";

const jwt = new JwtHelperService();
export class AuthService {
  @Injectable()
  private decodedToken;
  constructor(private http: HttpClient) {}
  public register(userData: any): Observable<any> {
    return this.http.post("/api/v1/users/register", userData);
  }
  public login(userData: any): Observable<any> {
    return this.http.post("/api/v1/users/auth", userData).map(token => {
      //debugger;
      return this.saveToken(token);
    });
  }

  private saveToken(token): string {
    //debugger;
    this.decodedToken = jwt.decodeToken(token);
    localStorage.setItem("bwm_auth", token.token);
    localStorage.setItem("bwm_meta", JSON.stringify(this.decodedToken));
    return token;
  }
} 

app.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { Routes, RouterModule } from "@angular/router";

import { LoginComponent } from "./login/login.component";
import { RegisterComponent } from "./register/register.component";

import { AuthService } from "./shared/auth.service";

const routes: Routes = [
  { path: "login", component: LoginComponent },
  { path: "register", component: RegisterComponent }
];

@NgModule({
  declarations: [LoginComponent, RegisterComponent],
  imports: [
    RouterModule.forChild(routes),
    FormsModule,
    CommonModule,
    ReactiveFormsModule
  ],
  exports: [],
  providers: [AuthService]
})
export class AuthModule {}

error on browser

compiler.js:2430 Uncaught Error: Can't resolve all parameters for AuthService: (?).
    at syntaxError (compiler.js:2430)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:18984)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:18877)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:19099)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:19108)
    at compiler.js:19046
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:19006)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:18725)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:18555)

image of error in browser

Answer 1

@Injectable() should be placed before the class definition

 @Injectable()
 export class AuthService {

 }

Answer 2

You should first add @Injectable to your AuthService

But this error indicates that the DI cannot resolve the requested parameter asked by the AuthService (HttpClient).

To resolve this issue, you need to include the HttpClient module in your AppModule as this code snippet shows

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
     AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

You can see their full documentation here HttpModule