Ошибка inject () должна вызываться из контекста внедрения при добавлении тега к app.component. html. помогите мне решить эту ошибку

Question

сильный текст: app.component. html файл:

    enter code here

{{title}}

<клиенты-приложения> </ app -клиенты>

strong text:
Customers.component.ts file:
`````````````````````````````````````````````````````````````````````````````
    enter code here
`````````````````````````````````````````````````````````````````````````````
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);
  }

}
``````````````````````````````````````````````````````````````````````````
strong text 
Customer.service.ts file:
```````````````````````````````````````````````````````````````````````````
    enter code here
````````````````````````````````````````````````````````````````````````
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());
  }
}
``````````````````````````````````````````````````````````````````````````
strong text
app.component.ts file:

```````````````````````````````````````````````````````````````````````````
    enter code here
`````````````````````````````````````````````````````````````````````````````

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

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

сильный текст: я получаю сообщение об ошибке этого типа при добавлении тега в app.component. html файл:

    enter code here
`````````````````````````````````````````````````````````````````````
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)

Answer 1

Я думаю, что ваша проблема связана с:

@Injectable({
  providedIn: 'root'
})

Я предлагаю удалить ключ providedIn и объявить службу в разделе providers вашего module