角2提供商例外

Question

當注射服務爲組件，我看到的錯誤：

One or more of providers "CategoriesComponent" were not defined: [?, [object Object], BrowserXhr, [object Object], [object Object], XHRBackend, [object Object]].

請幫我解決這個問題。非常感謝

下面是我的代碼：

category.services.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 


import { Category } from './index'; 
// import * as global from '../shared/global/globals'; 

@Injectable() 
export class CategoryService { 
    private _baseUrl: string = '/api/v1/category/list'; 

    constructor(private http: Http) { 
     // this._baseUrl = global.BASE_URL; 
    } 

    getCategories(): Observable<Category[]>{ 
     return this.http.get(this._baseUrl) 
      .map((res: Response) => { 
       return res.json(); 
      }) 
      .catch(this.handleError); 
    } 

    private handleError(error: any) { 
    var applicationError = error.headers.get('Application-Error'); 
    var serverError = error.json(); 
    var modelStateErrors: string = ''; 

    if (!serverError.type) { 
     console.log(serverError); 
     for (var key in serverError) { 
     if (serverError[key]) 
      modelStateErrors += serverError[key] + '\n'; 
     } 
    } 

    modelStateErrors = modelStateErrors = '' ? null : modelStateErrors; 

    return Observable.throw(applicationError || modelStateErrors || 'Server error'); 
    } 
} 

categories.component.ts

import { Component, OnInit } from '@angular/core'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
import { Category, CategoryService } from './index'; 

@Component({ 
    // moduleId: module.id, 
    selector: 'categories', 
    templateUrl: 'views/category/categories-component', 
    providers: [CategoryService, HTTP_PROVIDERS] 
}) 
export class CategoriesComponent implements OnInit { 
    categories: Category[]; 

    isCollapsed = false; 

    constructor(private categoryService: CategoryService) {} 

    ngOnInit() { 
     this.categoryService.getCategories() 
      .subscribe((categories: Category[]) => { 
       this.categories = categories; 
      }, 
      error => { 
       console.log(error); 
      }); 
     // console.log('======='); 
    } 

    toggle(){ 
     this.isCollapsed = !this.isCollapsed; 
    } 
} 

navbar.component.ts

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { CategoriesComponent } from '../../category/index'; 

@Component({ 
    // moduleId: module.id, 
    selector: 'navbar', 
    templateUrl: 'views/navbar/navbar', 
    directives: [ROUTER_DIRECTIVES, CategoriesComponent] 
}) 
export class NavbarComponent { 

} 

Answer 1

你不必提供在你提供一個存儲服務.....出現的錯誤是由於這只是...只是改變這個在您的categories.component.ts文件： -

providers: [CategoryService, HTTP_PROVIDERS] to===> providers: [HTTP_PROVIDERS]

這個工程如果u還沒有提供它在您的應用程序組件或main.ts文件...

u需要改變的第二件事情是你categoryservice進口的如下路徑： -

import { CategoryService } from '.path to category.service'

它會正常工作，然後:)