2016-08-11 59 views
9

的特性「的toString」在角2 RC 4我有一個類HttpLoading延伸的角度2.角2 RC 5引導自定義HTTP類類型錯誤:無法讀取空

原來的HTTP服務與RC 4我能夠使用下面的代碼來使用,在引導沒有任何問題:

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    provide(RequestOptions, { useClass: DefaultRequestOptions }), 
    provide(Http, { 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new HttpLoading(backend, defaultOptions), 
     deps: [XHRBackend, RequestOptions] 
    }) 
]).catch(err => console.error(err)); 

我DefaultRequest Options類

import { Injectable } from '@angular/core'; 
import { Headers, BaseRequestOptions } from '@angular/http'; 

@Injectable() 
export class DefaultRequestOptions extends BaseRequestOptions { 
    headers: Headers = new Headers({ 
     'Content-Type': 'application/json' 
    }); 
} 

我HttpLoading類看起來像這樣:

import { Http, RequestOptionsArgs, ConnectionBackend, RequestOptions, Response } from '@angular/http' 
import { Injectable } from '@angular/core' 
import {GlobalService} from './globalService'; 
import { Observable } from 'rxjs/Observable'; 

export class HttpLoading extends Http { 

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService) { 
     super(backend, defaultOptions); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<any> { 
     this._globalService.isLoading = true; 
     return super.get(url, options) 
      .map(res => { 
       this._globalService.isLoading = false; 
       return res.json(); 
      }) 
      .catch(this.handleError); 
    } 
} 

具有角2 RC 5引導的方式已經改變,我們現在需要有NgModule和引導這一點。我都跟着遷移指南,並建立了我的下面NgModule:

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule }  from '@angular/http'; 
import { Http, HTTP_PROVIDERS, RequestOptions, XHRBackend } from '@angular/http'; 

import { DefaultRequestOptions } from './DefaultRequestOptions'; 
import { HttpLoading } from './http-loading'; 

import { routing }  from './app.routing'; 
import { AppComponent } from './components/app.component'; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    providers: [ 
     HTTP_PROVIDERS, 
     { provide: RequestOptions, useClass: DefaultRequestOptions }, 
     { 
      provide: Http, 
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService), 
      deps: [XHRBackend, RequestOptions, GlobalService] 
     }, 
GlobalService 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { } 

但現在當我使用它在我的組件,它不會在控制檯發送的任何請求,服務器,並通過如下錯誤:

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'toString' of null 

我的成分在裏面我是用HTTP低於:

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Component({ 
    templateUrl: '../../templates/home/home.html' 
}) 
export class HomeComponent implements OnInit { 

    constructor(private http: Http) {} 

    ngOnInit() { 
     this.http.get('/home') 
      .subscribe((data) => { 

      }); 
    } 
} 

任何人都可以請指導?

回答

1

謝謝你這麼多大家對你的幫助,我能夠解決這個問題除去

{ provide: RequestOptions, useClass: DefaultRequestOptions }, 

這似乎是unnecassary與RC 5

+0

我們是否需要HTTP_PROVIDERS? – Sandeep

2

也許這是一個錯字,但我不能看到你的NgModule的提供商GlobalService類:

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    providers: [ 
     HTTP_PROVIDERS, 
     GlobalService, // <---------- 
     { provide: RequestOptions, useClass: DefaultRequestOptions }, 
     { 
      provide: Http, 
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService), 
      deps: [XHRBackend, RequestOptions, GlobalService] 
     } 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { } 
+0

蒂埃裏,遺憾的是,剛剛在錯字第問題。在我的代碼中,我在提供程序列表中有這個,但仍然出現錯誤。 「錯誤:未被捕獲(承諾):TypeError:無法讀取null的屬性'toString'」 –

20

我找到了解決辦法here。我有同樣的問題,它爲我工作。

只需添加一個身在Get選項:

this.http.get(url, { body: "" }); 

我希望它會爲你工作太

+0

這對我有效,謝謝! – tomaszbak

+1

對我也是。我有一個DELETE請求的問題。謝謝! –

+0

是的,令人驚訝的是這也適用於我。這是預期的行爲?對我來說看起來像一個bug。 –

相關問題