Error: This constructor is not compatible with Angular Dependency Injection

Question

I am importing a service in my login page, but when it is giving me this error, i have all the decorators in my service file and i have all the proper imports in my app modules. but i have no idea why is this error still coming. i have been importing services in same way but i dont know what exactly it needs to inject that service in the component.

Uncaught (in promise): Error: This constructor is not compatible with Angular Dependency Injection because its dependency at index 2 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

loginPage.ts

import { UserService } from "src/app/services/user.service";

 constructor(
    public navCtrl: NavController,
    private userService: UserService) { }

async doLogin() {
    let loader = await this.loadingCtrl.create({
      message: "Please wait...",
    });
    loader.present();

    this.userService.login(this.account).subscribe(
      (resp) => {
        loader.dismiss();
        this.navCtrl.navigateRoot("");
        //this.push.init();
      })}; 

my userService.ts

import { HttpApiService } from "./httpapi.service";
import { DeviceInfo } from "@capacitor/core";
import { AnalyticsService } from "./analytics.service";

@Injectable({
  providedIn:"root"
})
export class UserService {
  _user: any;

  constructor(
    private api: HttpApiService,
    private al: AnalyticsService,
    private device: DeviceInfo  
  ) {}
// all other methods ....
}

my httpApiService

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class HttpApiService {
  // LIVE

  constructor(private http: HttpClient) {
    this.url = "my url";
  }

  get(endpoint: string, params?: any, options?): Observable<any> {
    // Support easy query params for GET requests
    if (params) {
      let p = new URLSearchParams();
      for (let k in params) {
        p.set(k, params[k]);
      }
      // Set the search field if we have params and don't already have
      // a search field set in options.
      options.search = (!options.search && p) || options.search;
    }

    return this.http.get(this.url + "/" + endpoint, options);
  }

  post(endpoint: string, body: any, options?): Observable<any> {
    return this.http.post(this.url + "/" + endpoint, body, options);
  }

  put(endpoint: string, body: any, options?): Observable<any> {
    return this.http.put(this.url + "/" + endpoint, body, options);
  }

  delete(endpoint: string, options?): Observable<any> {
    return this.http.delete(this.url + "/" + endpoint, options);
  }

  patch(endpoint: string, body: any, options?): Observable<any> {
    return this.http.put(this.url + "/" + endpoint, body, options);
  }
}

my ionic info

Ionic:

   Ionic CLI                     : 5.2.7 (C:\Users\Adit\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.6
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.11.3
   OS     : Windows 10

Answer 1

inside my userService.ts i was calling the capacitor plugin from constructor which was wrong and which created the module error as it cant be injected to a component and needs to be declared as a constant as per docs.

my old userService.ts

import { HttpApiService } from "./httpapi.service";
import { DeviceInfo } from "@capacitor/core";
import { AnalyticsService } from "./analytics.service";

@Injectable({
  providedIn:"root"
})
export class UserService {
  _user: any;

  constructor(
    private api: HttpApiService,
    private al: AnalyticsService,
    private device: DeviceInfo  
  ) {}
// all other methods ....
}

my new userService.ts

import { HttpApiService } from "./httpapi.service";
import { AnalyticsService } from "./analytics.service";
import { Plugins } from "@capacitor/core";
const { Device } = Plugins;

@Injectable({
  providedIn:"root"
})
export class UserService {
  _user: any;

  constructor(
    private api: HttpApiService,
    private al: AnalyticsService, 
  ) {}

async getInfo(){
const info = await Device.getInfo();
console.log(info);
}
// all other methods ....
}