Angular: WebStorm not detecting class functions-CodePudding

Hi all I have the following page code:

import { Component, OnInit } from '@angular/core';
import {LicencesService} from '../../services/databaseServices/licences.service';

@Component({
  selector: 'app-licences',
  templateUrl: './licences.page.html',
  styleUrls: ['./licences.page.scss'],
})
export class LicencesPage implements OnInit {

  public licencesData: [];

  constructor(
    protected licenceService = LicencesService
  ) { }

  async ngOnInit() {
    await this.licenceService.getLicences('testing');
  }

}

However as you can see in the picture, my WebStorm does not register that it is a available method. I am wondering how to fix this?

I am unable to call any method inside this page. But in other pages I am able to and this error does not exits so I am not sure what I am doing wrong. If I do Alt Click on the method I get taken to the method as well.

CodePudding user response：

In this row:

constructor(
  protected licenceService = LicencesService
) { }

You are assigning the class LicensesService to the property licenceService. You are assigning literally the class, not an instance. In JavaScript, as well as in TypeScript, classes are first-class citizens, thus you can assign them to variables.

Probably, you meant to use Dependency Injection to fill the value of the variable, thus you have to specify the type and let Angular create the instance, not assign the property:

constructor(
  protected licenceService: LicencesService
) { }