CODEWITHSUNDEEP
angular
mles
mles

Reputation: 3466

Property does not exist on type in Service

I do have a service defined to get data from an API:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'

import { bookingClass } from './list/list.component'

@Injectable({
  providedIn: 'root'
})
export class BookingDataService {
  private apiBaseUrl = 'http://localhost:3000/api'

  constructor(private http: HttpClient) { }

  public getAllBookings(): Promise<bookingClass[]> {
    const url: string = `${this.apiBaseUrl}/bookings/listall`
    return this.http
      .get(url)
      .toPromise()
      .then(response => response as bookingClass[])
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('Something has gone wrong', error);
    return Promise.reject(error.message || error);
  }
}

I use this service to populate a list:

import { Component, OnInit } from '@angular/core';
import { BookingDataService } from '../booking-data.service';

export class bookingClass {
  _id: string;
  timestamp: string;
  tags: string[];
  amount: number;
  type: string;
}

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  constructor(private bookingDataService: BookingDataService) { }

  public bookings: bookingClass[];

  private getBookings(): void {
    this.bookingDataService
      .getAllBookings()
      .then(foundBookings => this.bookings = foundBookings)
  }

  ngOnInit() {
    this.getBookings();
  }

}

When running this with ng serve I'm getting an error

ERROR in src/app/list/list.component.ts(27,8): error TS2339: Property 'getAllBookings' does not exist on type 'BookingDataService'.

which I don't understand, as getAllBookings is public. What am I missing here?

Upvotes: 0

Views: 1048

Answers (2)

mles
mles

Reputation: 3466

The error was completely unrelated to this: I used the wrong port number for the api call and I had a typo in the underlying express api.

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71911

You are having a circular dependency. ListComponent is importing BookingDataService and BookingDataService is in its turn importing bookingClass which is defined inside the list component file.

I can only imagine the error is coming from there. You should move your bookingClass to its own file and export/import it from there.

note: name classes in PascalCase :D and a class is not really necessary here. In my opioning is better to use an Interface, this way your compiled code does not get bloated

Upvotes: 1

Related Questions