angular - 无法将类型分配给providerIn类型

我正试图借助Angular的教程创建一个服务https://angular.io/guide/http
我用的是角度7.0.7。
服务将从某个url获取json数据：

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

@Injectable
export class ProductListService {
  constructor(private http: HttpClient) {
  }

  productListUrl: string = "https://blahblah.com/products";

  getProductList() {
    return this.http.get(this.productListUrl);
  }
}

我在这个问题的标题下得到了一条弯弯曲曲的线。为什么会这样，我该怎么解决呢？
我有一个组件将使用此服务：

 import { ProductListService } from '../services/productList.service';
 @Component({
   selector: 'app-productlist',
   templateUrl: './productlist.component.html',
   styleUrls: ['./productlist.component.css'],
   providers: [ProductListService]
 })

最佳答案

您的@Injectable不正确。添加引用要使用服务的组件的providedIn属性：

@Injectable({
  providedIn: 'app-productlist',
})
export class ProductListService {
   constructor(private http: HttpClient) {
}

另一个解决方案是只使用这样的装饰器：@Injectable()，并在您的app.module.ts文件中声明您的服务，作为提供程序。