Error importing "Injectable" from Angular

File color.service.ts :

import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { GLOBAL } from '../services/global';

@Injectable()
export class ColorService {
    public url: string;
    constructor(private http:HttpClient){
        this.url = GLOBAL.url;
    }
    LoadData(data){
        const link = this.http.post( this.url+'colores/listar', data )
        .subscribe(
            resp=> {
              console.log(resp);
            },
            error => {
                console.log("Error", error);
            }
        );
        return link
    }
}

I import it into my component:

import { ColorService } from '../services/color.service';

In the constructor:

private dataService: ColorService

And I call the LoadData () function in my component:

console.log(this.dataService.LoadData(this.colores));

This generates the following error:

Update 1:

By adding it to app.module as suggested by > @jacknavarow , I get the following error: