我正在尝试将一个角度2应用程序移植到RC5,但我遇到了一个问题:我无法通过模块正确设置应用程序.
有一个名为CustomeRSService的服务,它通过Http检索客户数据.我创建了一个导入HttpModule并提供CustomeRSService的App Module.在另一个名为HomeModule的模块中,有一个使用该服务的组件.应用程序启动时,我在控制台上看到以下错误:
EXCEPTION: Error in ./HomeComponent class HomeComponent_Host - inline template:0:0 ORIGINAL EXCEPTION: No provider for Http!
我不知道为什么会这样……
任何建议将不胜感激.
谢谢.
这是文件:
app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { MdSidenavModule } from '@angular2-material/sidenav'; import { MdListModule } from '@angular2-material/list'; import { MdIconModule } from '@angular2-material/icon'; import { MdToolbarModule } from '@angular2-material/toolbar'; import { MdButtonModule } from '@angular2-material/button'; import { AppComponent } from './app.component'; import { routing } from './app.routing'; import { CustomeRSService } from './shared/rest_services/customers.service'; import { HomeModule } from './home/home.module'; @NgModule({ declarations: [AppComponent],imports: [ BrowserModule,HttpModule,// material design MdSidenavModule,MdListModule,MdIconModule,MdToolbarModule,MdButtonModule,routing,// SharedModule.foorRoot(),HomeModule ],providers: [ CustomeRSService,Http ],bootstrap: [AppComponent] }) export class AppModule { }
app.component.ts
import { Component } from '@angular/core'; import { CustomeRSService } from './shared/rest_services/customers.service'; @Component({ selector: 'app-root',templateUrl: 'app.component.html',styleUrls: ['app.component.scss'] }) export class AppComponent { views = [ {title: 'Home',icon: 'home',path: 'home' } ]; constructor() { } }
customers.service.ts
import { Injectable } from '@angular/core'; import { Http } from '@angular/Http'; @Injectable() export class CustomeRSService { private static _base = 'http://...'; constructor(private _http: Http) { } getAll() { return this._http.get(CustomeRSService._base + "/customers.json"); } }
home.module.ts
import { NgModule } from '@angular/core'; import { routing } from './home.routing'; import { HomeComponent } from './home.component'; @NgModule({ imports: [ routing ],declarations: [ HomeComponent ],exports: [ HomeComponent ] }) export class HomeModule { }
home.component.ts
import { Component,OnInit } from '@angular/core'; import { CustomeRSService } from '../shared/rest_services/customers.service'; @Component({ selector: 'app-home',templateUrl: 'home.component.html',styleUrls: ['home.component.scss'] }) export class HomeComponent implements OnInit { constructor(private _customers: CustomeRSService) { this._customers.getAll().subscribe((data) => { console.log(data); }); } ngOnInit() { } }
我认为您不需要在模块的providers属性中指定有关Http的内容.在import属性中包含HttpModule时完成此操作.
原文链接:https://www.f2er.com/angularjs/141557.html@NgModule({ declarations: [AppComponent],providers: [ CustomeRSService // <----- ],bootstrap: [AppComponent] }) export class AppModule { }
HttpModule配置HTTP的相关提供程序.见https://github.com/angular/angular/blob/master/modules/%40angular/http/http.ts#L354
否则,也许这是一个错字:
import { Http } from '@angular/Http';
代替
import { Http } from '@angular/http';