Course / Angular + NestJS / Module 5 / 35 / Front-End Meets Back-End

Question

Hello everyone i'm trying to finish this course but I stuck in this section (look at the Title of this question to locate the place) and now for a couple of days witout any progress. Everything was going well till I had to do this:
-----------------------------
getCars() {
return this.cars;
}
-----------------------------
for this:
-----------------------------
getCars(): Observable {
return this.http.get('/cars/');
}
-----------------------------
and also import this:
-----------------------------
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
-----------------------------
I changed several of times the code reading the documentation in Angular and Stack Overflow but still having the same white screen in port 4200. Nest is doing well in port 3000/cars (i can see al the items).

And the error report in Antom:
@./transportation.service.ts
(!) TypeScript Property 'http' does not exist on type 'TransportationService'.
(!) TypeScript Generic type 'Observable<T>' requires 1 type argument(s).
(i) TypeScript 'HttpClient' is declared but its value is never read.

@./car.controller.ts
(i) TypeScript Parameter 'param' implicity has an 'any' type, but a beter type may be interferred from usage.

And this is how my ./transportation.service.ts looks:

import { Injectable } from '@angular/core';
import { Car } from './car';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class TransportationService {

// new code
subaru: Car = {make: 'Subaru', model: 'Outback', miles: 58232};
honda: Car = {make: 'Honda', model: 'Accord', miles: 39393};
bmw: Car = {make: 'BMW', model: 'X3', miles: 4400};

cars:Car[] = [this.subaru, this.honda, this.bmw];

constructor() { }

// new code
getCars(): Observable {
return this.http.get('/cars/');
}
addCar(car: Car){
this.cars.push(car);
}
}

Please help me!

Answer 1

i think this video explains it better https://www.youtube.com/watch?v=LmIsbzt-S_E

But i know you should import these:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Car } from './car';

Add this to constructor:
constructor(private http: HttpClient) { }

Then use this getCars function:
getCars(): Observable<Car[]> {
return this.http.get<Car[]>('/cars/');
}

Best of luck

Answer 2

I just kept moving forward with the course and everything falled in the right place. I'm very happy with this.