Component can't read service (VScode with linter doesn't notice anything)

I'm newbie with angular8.
I'm writing a component that reads a simple service. During the writing of the code with VScode no error is triggered, while when I serve the application, this error appears:

ERROR TypeError: Cannot read property 'getItalyWeatherData' of undefined

This is my service:

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

@Injectable({
  providedIn: 'root',
})
export class WeatherForecastApiService {
    constructor(private http: HttpClient) { }

    public getItalyWeatherData(cityName: string) {
        const s = 'https://api.openweathermap.org/data/2.5/weather?q=' + cityName + ',it&appid=d5754a8efdf1ead276cffa4f8250f1e1';

        return this.http.get(s);
    }
}

And this is my component:

.ts File

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { WeatherForecastApiService } from './weatherForecastApiService/weather-forecast-api.service';

@Component({
    selector: 'app-weather-forecast',
    templateUrl: './weather-forecast.component.html',
    styleUrls: ['./weather-forecast.component.scss'],
})

export class WeatherForecastComponent  {
    public weatherData: WeatherForecastApiService;
    public weatherFeature = new BehaviorSubject<WeatherFeature>(undefined);

    constructor() {
        this.weatherData.getItalyWeatherData('Pisa').subscribe((response) => {
            const ks: string[] = ['name', 'main', 'temp', 'pressure', 'weather'];
            this.weatherFeature.next({
                cityName: response[ks[0]],
                degrees: Number((response[ks[1]][ks[2]] - 273.15).toFixed()),
                pressure: Number(response[ks[1]][ks[3]]),
                sky: response[ks[4]][0][ks[1]],
            });
            console.log(this.weatherFeature);
        });
    }
}

.html file:

<div class="weatherForecastSpace"></div>

I hope it's nothing serious and it may be my initial shortcoming.