错误:意外的价值' ProductService'由模块宣布的AppModule'

时间:2017-05-08 19:32:09

标签: angular http observable observablecollection subscribe

我试图通过" ProductService.ts"中的observables执行http调用,导入到" ProductComponent.ts"哪个人怀疑它。我想我已经涵盖了所需的一切,但我得到了错误:

错误:意外的价值' ProductService'由模块“AppModule'”宣布。

有人可以指出我哪里出错吗?

的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()); 
        }

    }

1 个答案:

答案 0 :(得分:2)

您不申报服务。你提供他们。将它从声明移动到提供者并且应该清理它(也就是说,只要你的服务全部被整理出来并且正确等等)。