Erreur: valeur inattendue 'ProductService' déclarée par le module 'AppModule'

Question

Je tente d'effectuer un appel http via observables dans le "ProductService.ts", importé dans le "ProductComponent.ts" qui s'y abonne. Je pense avoir couvert tout ce qui est requis mais je reçois suite à l'erreur:

Erreur: Valeur inattendue 'ProductService' déclarée par le module 'AppModule'.

S'il vous plaît quelqu'un peut-il signaler où je vais mal?

AppModule:

/* angular */ 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { CommonModule } from "@angular/common"; 

/* third party */ 
import { TooltipModule } from "ngx-tooltip"; 
import { NgRedux, NgReduxModule } from 'ng2-redux'; 
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal'; 
import { RootReducer, IAppStore } from './state/state.store'; 

/* components */ 
import { BaseComponent } from './base.component'; 
import { HeaderComponent } from './includes/header.component'; 
import { FooterComponent } from './includes/footer.component'; 
import { NavigationComponent } from './includes/navigation.component'; 
import { MapComponent } from './components/maps/map.component'; 
import { ToolbarComponent } from './components/ui/toolbar/toolbar.component'; 
import { SearchComponent } from './components/ui/search/search.component'; 
import { StoreComponent } from './state/state.component'; 
import { ModalComponent } from './components/ui/modal/modal.component'; 
import { UserComponent } from './components/users/user.component'; 
import { CategoryComponent } from './services/products/category.component'; 
import { ProductComponent } from './services/products/product.component'; 
import { ProductDetails } from './services/products/productdetails.component'; 
import { CartComponent } from './services/cart/cart.component'; 
import { CheckoutComponent } from './services/checkout/checkout.component'; 
import { NotificationComponent } from './components/ui/notifications/notification.component'; 
import { PanelComponent } from './components/ui/panel/panel.component'; 
import { UIController } from './components/ui/uinav/uicontroller.component'; 
import { ProductService } from './services/products/product.service'; 

/* views */ 
import { HomeComponent } from './views/home.view'; 
import { ContactComponent } from './views/contact.view'; 
import { AboutComponent } from './views/about.view'; 
import { MainComponent } from './views/main.view'; 
import { FormsComponent } from './views/forms.view'; 
import { PlansView } from './views/plans.view'; 
import { ProductView } from './views/products.view'; 

/* routers */ 
import { routing } from './routers/routing.route'; 

/* custom */ 
import { ScrollTo } from './helpers/ScrollCtrl'; 
import { MenuCtrl } from './helpers/MenuCtrl'; 

@NgModule({ 
    declarations: [ 
    BaseComponent, 
    HomeComponent, 
    AboutComponent, 
    ContactComponent, 
    FormsComponent, 
    HeaderComponent, 
    FooterComponent, 
    NavigationComponent, 
    MainComponent, 
    MapComponent, 
    ModalComponent, 
    ToolbarComponent, 
    StoreComponent, 
    UserComponent, 
    CategoryComponent, 
    ProductComponent, 
    ProductDetails, 
    CartComponent, 
    CheckoutComponent, 
    SearchComponent, 
    NotificationComponent, 
    PanelComponent, 
    ProductView, 
    PlansView, 
    UIController, 
    ProductService 
    ], 
    exports:[ 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    NgReduxModule, 
    Ng2Bs3ModalModule, 
    TooltipModule 
    ], 
    providers: [], 
    bootstrap: [ 
    BaseComponent 
    ] 
}) 

export class AppModule { 
    constructor(ngRedux: NgRedux<IAppStore>) { 
    ngRedux.configureStore(RootReducer, { 
     appState: null 
    }); 
    } 
} 

ProductComponent:

import { Component, OnInit } from '@angular/core'; 
import { Product } from './product.entity'; 
import { ProductService } from './product.service'; 
import { ProductCategory } from './productcategory.entity'; 

@Component({ 
    selector: 'e-productlist', 
    templateUrl: './templates/products.template.html'  
}) 

export class ProductComponent implements OnInit { 
    public productList: Product[]; 

    constructor(private _productService: ProductService) { 
    } 

    ngOnInit(){ 
     this._productService.GetAllProducts().subscribe(response => this.productList); 
    } 
} 

ProductService.ts

import { Injectable } from '@angular/core'; 
    import { Product } from './product.entity'; 
    import { Http, Response } from '@angular/http'; 
    import { Observable } from 'rxjs/observable'; 
    import { ProductCategory } from './productcategory.entity'; 
    import 'rxjs/add/operator/map'; 

    @Injectable() 
    export class ProductService implements IProductService { 
     private productCategories: ProductCategory[]; 
     private products: Product[]; 
     private queryUrl = "../../../products-list.json"; 

     constructor(public _http: Http) { 
     } 

     GetAllProducts() { 
      return this._http.get(this.queryUrl).map((_response:Response) => this.products = _response.json()); 
     } 

    } 

Answer 1

Vous ne déclarez pas les services. Vous les fournissez. Déplacez-le des déclarations aux fournisseurs et cela devrait le nettoyer (c'est-à-dire, tant que votre service est autrement trié et corrigé etc.).