Angular 2 TypeScript Error: Can't resolve all parameters for ProductsService

Question

I am getting the following: "Error: Can't resolve all parameters for ProductsService".

Ref: http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#toc-data-binding

product.model.ts

export class Product {
constructor(
    public ProductID?: number,
    public ProductName?: string,
    public UnitPrice?: number,
    public UnitsInStock?: number,
    public Discontinued?: boolean
) { } }

products.service.ts

import { Injectable } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Product } from './product.model';
import { Observable } from 'rxjs/Rx';

@Injectable()

// See: http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#toc-data-binding

export class ProductsService {
    constructor( private jsonp: Jsonp) { }

    fetchData(action: string = "", data?: Product): Observable<Product[]>{
        console.log("BGW Action: " + action);
        console.log("BGW this.serializeModels(data) = " + this.serializeModels(data));
        return this.jsonp.get(`http://demos.telerik.com/kendo-ui/service/Products/${action}?callback=JSONP_CALLBACK${this.serializeModels(data)}`).map(response => response.json())
    }

    private serializeModels(data?: Product): string {
        return data ? `&models=${JSON.stringify([data])}` : '';
    }
}

app.component.ts

Contains:

import { ProductsService } from './products.service';
import { Product } from './product.model';
import { Inject } from '@angular/core';

And:

providers: [ProductsService],

And:

public productsData: Array<Product> = [];
// public listItems: Array<string> = [];

And:

//constructor (@Inject(ProductsService) private productService: ProductsService) { }
constructor (private productService: ProductsService) { }

ngOnInit() {
  this.productService.fetchData().subscribe(
    (data) => this.productsData = data
  )
}

Any ideas much appreciated.

Regards,

Ben

Your fetchData accepts two parameters, `action` and `data`, but where you call the method, you arent passing any parameters... — AJT82, Jan 31 '17 at 20:40

score 4 · Answer 1 · answered Feb 01 '17 at 02:24

4

To resolve this, in app.component.ts I changed:

constructor (private productsService: ProductsService) { }

to

constructor (@Inject(ProductsService) private productsService: ProductsService) { }

In product.service.ts, change:

constructor( private jsonp: Jsonp) { }

to:

constructor(@Inject(Jsonp) private jsonp: Jsonp) { }

answered Feb 01 '17 at 02:24

webtechy

101
2
6

Thanks! using `@Inject(...)` in `constructor` solved an error being unable to inject __anything__ into `HttpInterceptor` – mikhail-t Mar 02 '18 at 15:46
2

Turned out I was missing an `@Injectable()` decorator on my `export class AuthService extends HttpInterceptor { // ... code }` as was solved on https://stackoverflow.com/questions/39847356/angular2-cant-resolve-all-parameters-error-while-injecting-http-into-a-cust – mikhail-t Mar 05 '18 at 22:46

Angular 2 TypeScript Error: Can't resolve all parameters for ProductsService

1 Answers1