Fehler: Unerwarteter Wert 'ProductService' vom Modul 'AppModule'

Question

Ich versuche, einen HTTP-Aufruf über Observables in der "ProductService.ts", importiert in die "ProductComponent.ts", die es zu abonnieren. Ich denke, ich habe alles Notwendige abgedeckt, aber ich bekomme folgende Fehlermeldung:

Fehler: Unerwarteter Wert 'ProductService' vom Modul 'AppModule' deklariert.

Bitte kann jemand darauf hinweisen, wo ich falsch liege?

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

Sie Dienste nicht erklären. Sie stellen sie zur Verfügung. Verschieben Sie es von den Deklarationen zu den Providern und das sollte es bereinigen (das heißt, solange Ihr Dienst sonst alles aussortiert und korrekt ist usw.).