CODEWITHSUNDEEP
angulartypescript
Gaurav Chauhan
Gaurav Chauhan

Reputation: 1357

Angular - How to fix 'property does not exist on type' error?

I am following this video tutorial (text version of the same). I have followed exactly the same code and I am receiving this error:

error TS2339: Property 'getEmployees' does not exist on type 'EmployeeService'

I looked on the Internet and visited many questions on Stack Overflow like this, this, this and this, and so many others issues opened related to this error on GitHub.

Service:

//import statements go here ...

@Injectable()
export class EmployeeService {
private listEmployees: Employee[] = [
    {
      //just to avoid longer code, deleted dummy data.
    },
  ];

  getEmployees(): Employee[] {
      return this.listEmployees; //ERROR in src/app/employees/list-employees.component.ts(14,44)
  }
}

Component class:

//import statements
@Component({
    selector: 'app-list-employees',
    templateUrl: './list-employees.component.html',
    styleUrls: ['./list-employees.component.css']
})
export class ListEmployeesComponent implements OnInit {
    employees: Employee[];
    constructor(private _EmployeeService: EmployeeService) { }

    ngOnInit() {
        this.employees = this._EmployeeService.getEmployees();
    }

}

I have imported service in app.module.ts and added it in providers array of ngModule.

I am not able to solve the error neither to understand what is causing this error.

Upvotes: 43

Views: 286412

Answers (6)

Syed Siraj Wajeed
Syed Siraj Wajeed

Reputation: 101

Some times files are not saved.. So, save all files Or you can close all the files (will prompt you to save..) and build again.. worked for me..

Upvotes: 1

MUHAMMAD SHAHID RAFI C P
MUHAMMAD SHAHID RAFI C P

Reputation: 1229

If all things mentioned above checked, check

constructor(private _employeeService: EmployeeService) { }

private, the access specifier is there. The same issue will occur when access specifier missed.

Upvotes: 3

Melchia
Melchia

Reputation: 24224

It usually happens when you develop Angular applications. To solve this just shut down the server & start it again:

$ ng serve

Explanation

This happens because when you start the application, The server is actually serving the bundles(JavaScript/CSS/HTML... output files) stored in the dist folder. Sometimes, when you make changes in your code, the changes don't reflect in your bundles, which will lead to the server still using the old bundles.

Upvotes: 65

Enkh
Enkh

Reputation: 1

I would also subscribe to the service method instead of saving it to another value in ngOnInit():

ngOnInit() {
    this.employees = this._EmployeeService.getEmployees();
}

To something like:

ngOnInit(){
   this.getEmployees()
}

private getEmployees(): void {
    this._EmployeeService.getEmployees()
        .subscribe(fetchedEmployees = > this.employees = fetchedEmployees)
}

Upvotes: 0

Phanindra Yaralagadda
Phanindra Yaralagadda

Reputation: 21

Use a static keyword in the method declaration:

 public static getEmployees(): any []{

}

Upvotes: 1

Chetan Laddha
Chetan Laddha

Reputation: 1007

If you want to avoid the compilation warning then the dirty fix would be to make

employees: any[];

any instances allow any method to call any method on that object. This will avoid compilation warning but it's not runtime safe.

You need to be careful before using it. If you are sure that the method will be available at runtime then only use it.

Upvotes: 2

Related Questions