I've encountered a peculiar Type Error while working with Abstract Classes in Angular 16.
Error: Uncaught (in promise): TypeError: this.httpService.get is not a function
Could it be that my interpretation of using Abstract Classes is off? Everything seems to function properly when I remove the Abstract class and directly call the http.service.
Models/HttpResponse.ts
export class HttpResponse {
status: string | undefined;
data: any;
success: string | undefined;
message: string | undefined;
}
Services/http.abstract_service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export abstract class AbstractHttpService {
public abstract get(url: string): Observable<any>;
}
Services/http.service.ts
import { AbstractHttpService } from './http.abstract_service';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HttpResponse } from '@models/http_response';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class HttpService implements AbstractHttpService {
constructor(private http: HttpClient){ }
// GET Request
get(url: string): Observable<any> {
return this.http.get(url, {observe: 'response'}).pipe(
map((res: any) => {
let responseBody = res?.body;
let result: HttpResponse;
if(res){
result = {
status: res.status,
data: responseBody.data,
success: responseBody.success,
message: responseBody.message
}
}
else {
console.log(`Error! HttpStatus: ${res.status}`);
}
return result;
}));
}
Services/data.service.ts
import { Injectable } from '@angular/core';
import { AbstractHttpService } from './http.abstract_service';
import { HttpResponse } from '@models/http_response';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor( private httpService: AbstractHttpService ){ }
getMyData(): Observable<HttpResponse> {
const url = `${MyApiUrl}/Data`;
// This is where the issue arises. When specifying the type as HttpService instead of using the abstract class, everything works.
const response = this.httpService.get(url);
return response;
}
Pages/my/my.component.ts
import { Component, OnInit } from '@angular/core';
import { Result } from '@models/result';
import { DataService } from '@services/data.service'
import { HttpResponse } from '@models/http_response';
@Component({
selector: 'app-my',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
dataSource: Result[] = [];
constructor(private dataService: DataService) { }
onGetMyData() {
this.dataService.getMyData().subscribe((response: HttpResponse) => {
console.log(`Status: ${response.status} Success: ${response.success} Data:`, response.data.results);
response.data.results.forEach((val: any) => {
this.dataSource.push(Object.assign({}, val))
});
});
}
async ngOnInit() {
await this.onGetMyData();
}
}
Any assistance would be greatly appreciated!