component not recognizing my Service passed by Dependency injection (Angular)

Question

Since yesterday I've been following an Angular tutorial ( https://www.lynda.com/Angular-tutorials/Building-providing-service/540347/553419-4.html ) and I got to the point where I started to use services.

the Service class, called MediaServiceService and stored in the file media-service.service.ts looked like this:

import { Injectable } from '@angular/core';

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

  constructor() { }

    get(){
    return this.mediaItems;
}
add(mediaItem){
    this.mediaItems.push(mediaItem);
}
delete(mediaItem){
    let index = this.mediaItems.indexOf(mediaItem);
    if(index >= 0){
        this.mediaItems.splice(index, 1);
    }
}

mediaItems = [
    {
        id: 1,
        name: "Firebug",
        medium: "Series",
        category: "Science Fiction",
        year: 2010,
        watchedOn: 1294166565384,
        isFavorite: false
    },
    {
        id: 2,
        name: "The Small Tall",
        medium: "Movies",
        category: "Comedy",
        year: 2015,
        watchedOn: null,
        isFavorite: true
    }, {
        id: 3,
        name: "The Redemption",
        medium: "Movies",
        category: "Action",
        year: 2016,
        watchedOn: null,
        isFavorite: false
    }, {
        id: 4,
        name: "Hoopers",
        medium: "Series",
        category: "Drama",
        year: null,
        watchedOn: null,
        isFavorite: true
    }, {
        id: 5,
        name: "Happy Joe: Cheery Road",
        medium: "Movies",
        category: "Action",
        year: 2015,
        watchedOn: 1457166565384,
        isFavorite: false
    }
];
}

The Injectable decorator did not come with the tutorial, as the tutorial does not use the angular CLI but I did.

I went my app.module.ts and and imported the service as follows:

import { MediaServiceService } from "./media-service.service";

and then on my providers metadata property for the @NgModule decorator still inside my app.module.ts:

providers: [
  MediaServiceService,
],

Now the problem came when I added the service to one of my components. I tried importing the service and injecting it through constructor, and the class ended up like this:

import {Component, OnInit} from '@angular/core';
import {MediaServiceService} from "../media-service.service";

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

mediaItems;

constructor(mediaService: MediaServiceService){

}

ngOnInit(): void {
    this.mediaItems = this.mediaService.get();
}

onMediaItemDelete(mediaItem) {
    this.mediaService.delete(mediaItem);
}


}

I've been working for a while using angular in Ionic for past projects, and I know this is how dependency injection should work and even the person at the video did it this way, yet for some reason it kept on giving me the error:

TS2339:Property 'mediaService' does not exist on type 'MediaItemListComponent'.

I'm using PHPStorm as my IDE and it's been causing me minor bugs, so I thought maybe just closing and reopen it would fix it but it didn't

My work around was to, like the error said, create a variable called mediaService, and inside my constructor I assigned the injected MediaService to my variable as follows:

mediaService;
constructor(mediaService: MediaServiceService){
    this.mediaService = mediaService;
}

This did work, but I'm still doubtful on why did I have to do this, if I never had to do it before.

Was I doing anything wrong? why did my dependency injection 'did not work properly'?

Answer 1

If you are planning to use the mediaService outside the constructor, declare it by changing your constructor to:

constructor(private mediaService: MediaServiceService){

}

Answer 2

You forgot to put private on your constructor:

constructor(private mediaService: MediaServiceService){

}