Angular 2 供应商异常
Angular 2 Provider exception
将服务注入组件时,我看到错误:
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 {
}
你不必在你的提供者数组中提供服务......发生的错误只是因为这个......只需在你的categories.component.ts文件中改变它:-
providers: [CategoryService, HTTP_PROVIDERS] to===> providers:
[HTTP_PROVIDERS]
如果您没有在您的应用程序组件或 main.ts 文件中提供它,这将有效...
您需要更改的第二件事是您的类别服务导入路径,如下所示:-
import { CategoryService } from '.path to category.service'
它会工作正常:)
将服务注入组件时,我看到错误:
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 {
}
你不必在你的提供者数组中提供服务......发生的错误只是因为这个......只需在你的categories.component.ts文件中改变它:-
providers: [CategoryService, HTTP_PROVIDERS] to===> providers: [HTTP_PROVIDERS]
如果您没有在您的应用程序组件或 main.ts 文件中提供它,这将有效...
您需要更改的第二件事是您的类别服务导入路径,如下所示:-
import { CategoryService } from '.path to category.service'
它会工作正常:)