error inject() must be called from an injection context when adding a tag to the...

app.component.html file:

<h1>{ { title } }</h1>

<app-customers></app-customers>


Customers.component.ts file:

import { Component, OnInit } from '@angular/core';
import {CustomerService} from '../customer.service';
import {Customer} from '../Customer';

@Component({
selector: 'app-customers',
templateUrl: './customers.component.html',
styleUrls: ['./customers.component.css'],
providers:[CustomerService]
})
export class CustomersComponent implements OnInit {
Customers: Customer[];
Customer: Customer;
Customer_firstname:string;
Customer_lastname:string;
phone:string;

constructor(private CustomerService: CustomerService) {this.CustomerService= CustomerService; }

ngOnInit(): void {
this.CustomerService.getCustomers()
.subscribe( Customers =>
this.Customers = Customers);
}

}


Customer.service.ts file:

import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import {Customer} from './Customer';
import 'rxjs/add/operator/map';


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

constructor(private http:Http) { }


getCustomers()
{
return this.http.get('http://localhost:3000/api/Customers')
.map(res=>res.json());

}

addCustomer(newCustomer)
{
var headers= new Headers();
headers.append('Content-Type','applicatoin/json');
return this.http.post('http://localhost:3000/api/Customer', newCustomer,{headers:headers})
.map(res=>res.json());
}


deleteCustomer(id)
{
return this.http.delete('http://localhost:3000/api/Customer'+id)
.map(res=>res.json());
}
}


app.component.ts file:

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'OnlineBank app Works!';
}


I am getting error of this type when adding the tag <app-customers></app-customers> to the app.component.html file:

ERROR Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:925)
at Module.ɵɵinject (core.js:941)
at Object.XHRBackend_Factory [as factory] (http.js:1445)
at R3Injector.hydrate (core.js:16944)
at R3Injector.get (core.js:16696)
at injectInjectorOnly (core.js:931)
at ɵɵinject (core.js:941)
at injectArgs (core.js:1058)
at Object.factory (core.js:17114)
at R3Injector.hydrate (core.js:16944)
main.ts:12 Error: inject() must be called from an injection context
at injectInjectorOnly (core.js:925)
at Module.ɵɵinject (core.js:941)
at Object.XHRBackend_Factory [as factory] (http.js:1445)
at R3Injector.hydrate (core.js:16944)
at R3Injector.get (core.js:16696)
at injectInjectorOnly (core.js:931)
at ɵɵinject (core.js:941)
at injectArgs (core.js:1058)
at Object.factory (core.js:17114)
at R3Injector.hydrate (core.js:16944)

Continue reading...