Angular2 - No provider for service error

Question

Running Angular2 framework and I'm getting the mentioned above error message

Error in ./AppComponent class AppComponent - inline template:2:8 caused by: No provider for ProductService!

Although the service is defined in the providers array of the app.component.ts file, which is the relevant file for the service to be referenced (see below text). The error triggers at core.umd.js file:

import { ProductService } from './products/product.service';
@Component({
    selector: 'pm-app',
    template: ``,
    providers:[ ProductService ] 
}) 

product.Service code:

import {Injectable} from '@angular/core';
import { IProduct } from './product';

@Injectable()
export class ProductService
{
    getProducts(): IProduct[]
    {
        return []
    }
}

product-list.component:

@Component ({
    selector: 'pm-products',
    moduleId: module.id,
    templateUrl: 'product-list.Component.html', 
    styleUrls: ['product-list.Component.css'] 
})

export class ProductListComponent implements OnInit
{
    products: IProduct[];

    constructor(private _productService: ProductService){}

    ngOnInit(): void{
         this.products = this._productService.getProducts();
    }
}

and the relevant code in the product-list.component.html:

<table class='table' *ngIf="products && products.length">

In the future please take a second to format your question and code so it is legible. I have done it for you this time. — Igor, May 10 '17 at 10:21
Possible duplicate of [Angular2 no provider for NameService](http://stackoverflow.com/questions/30580083/angular2-no-provider-for-nameservice). see the later answers which are specific to the released (not alpha/beta) versions of Angular. — Igor, May 10 '17 at 10:25
Igor, Thank you, will do next time. I went over the answer in the Angular2 no provider for NameService case before submitting my case. — Guy E, May 10 '17 at 18:39
@GuyE ok so how do you use this service in your component? Maybe in the html? — eko, May 11 '17 at 09:37
Where do you provide `_productService` for your `ProductListComponent`? Can you also provide AppComponent and it's html? — eko, May 12 '17 at 07:48
@echonax: See above: the products property is being initiate by the service, in the ngOnInit() function of the ProductListComponent — Guy E, May 12 '17 at 07:55
@GuyE ok where do you provide the service to this component? — eko, May 12 '17 at 07:57
@echonax- I'm not sure I understand your question - the service is being injected into the constructor of the product-list.component, and the service is calling the getProducts() method, when the component is being initiated (ngOnInit) — Guy E, May 13 '17 at 14:13

score 0 · Answer 1 · answered May 10 '17 at 10:22

0

Make sure you add the provider ProductService in the app.module.ts ofcourse with importing

answered May 10 '17 at 10:22

Jeyenth

472
4
10

1

There's no need to provide it in a module if it is provided in the component annotation – eko May 10 '17 at 10:25
@echonax is right and this is the case - it is imported in the component module – Guy E May 10 '17 at 18:44

Angular2 - No provider for service error

1 Answers1