エラー： 'AppModule'モジュールによって宣言された予期しない値 'ProductService'

Question

"ProductService.ts"内のobservablesを介してhttpコールを実行しようとしていますが、 "ProductComponent.ts"にインポートされています。しかし、私はすべてをカバーしていると思うが、私はエラーの後になる：

エラー： 'AppModule'モジュールで宣言された予期しない値 'ProductService'。

私が間違っている場所を指摘できますか？

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

あなたがサービスを宣言しません。あなたはそれらを提供する。それを宣言からプロバイダに移してください。そうすれば、サービスが他の方法ですべて整理され、正しく整理されている限り、それを整理する必要があります。