角2 RC 2ルータをカスタムExceptionHandlerに注入する方法

Question

私は角度2 RC2を使用しています。私は角2ルーターを私のカスタムExceptionHandlerクラスに注入する必要があります。無駄に@Injectを持つルータ：しかし、私は次のエラー

Error: Error: Cannot resolve all parameters for 'ErrorHandler'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'ErrorHandler' is decorated with Injectable.

を取得し、私は民間のルータを飾ってみました。私はtypescriptを使用しているので、ここで@Inject属性が必要ではないと思います。この

import { ExceptionHandler } from '@angular/core'; 
import { Router } from '@angular/router'; 

export class ErrorHandler extends ExceptionHandler{ 

    constructor(
     private router: Router 
    ){ 
     super(null, null); 

    } 

    call(error, stackTrace = null, reason = null) { 
     console.log(error); 
     this.router.navigate(['/error']); 
    } 
} 

マイmain.tsは、なぜ私はこのエラーを取得しています。この

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app.component'; 

import { provide, ExceptionHandler } from '@angular/core'; 
import { ErrorHandler } from './error-handler/error-handler'; 

import { HTTP_PROVIDERS } from '@angular/http'; 
import { ROUTER_PROVIDERS } from '@angular/router'; 

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    ROUTER_PROVIDERS, 
    provide(ExceptionHandler, {useClass: ErrorHandler}) 
]); 

のように見えるように

私のカスタムexceptionHandlerのが見えますか？ ExceptionHandlerのインスタンス化時にルータを注入できないのですか？

完全なソースコードはこちらです

https://github.com/harindaka/angular2-seed-typescript/tree/b368315ce6608085f3154a03bc53f0404ce16495

Answer 1

更新はExceptionHandlerは、私が目を推測ErrorHandlerhttps://stackoverflow.com/a/35239028/217408

orgiginal

に名前が変更されました循環依存性が原因です。あなたは、インジェクタを注入することにより回避し、命令的にルータを取得することができます：1は非常に簡単です

export class ErrorHandler extends ExceptionHandler{ 

    private router: Router 
    constructor(inject:Injector){ 
     this.router = injector.get(Router); 
     super(null, null); 

    } 

    call(error, stackTrace = null, reason = null) { 
     console.log(error); 
     this.router.navigate(['/error']); 
    } 
} 

Answer 2

- クラスに注入することを、あなたはクラスinjectableを作成する必要があります。おなじみの音ですね。

ErrorHandlerクラスの上部に@Injectable()を追加した場合、それは機能するはずです。

import { ExceptionHandler, Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Injectable() 
export class ErrorHandler extends ExceptionHandler{ 
    [...] 
} 

Answer 3

だけで同様の問題を抱えていたし、この（そのアプリモジュールのプロバイダの配列の使用）のようにそれを解決：

{ 
    provide: ExceptionHandler, 
    useFactory: (router) => { 
     return new ErrorHandler(router); 
    }, 
    deps: [Router] 
} 

Answer 4

パーティにおそらく後半が、これは私の作品（角2 RC4）：あなたのmain.tsで

import { Injectable, Injector, ExceptionHandler } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Injectable() 
export class AppExceptionHandler extends ExceptionHandler { 

    private router; 
    injector: Injector; 

    constructor(injector: Injector) { 
     super(null, null); 
     this.injector = injector; 
    } 

    call(exception: any, stackTrace?: any, reason?: string): void { 
     if (this.router == null) { 
      this.router = this.injector.get(Router); 
     } 

     // do something with the error such as spitting out to console: 
     console.log('exception:', exception); 
     console.log('stackTrace:', stackTrace); 
     console.log('reason:', reason); 

     // navigate to custom error page (defined in your routes) 
     this.router.navigate(['error']); 
    } 
} 

そして：

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    APP_ROUTER_PROVIDERS, 
    provide(ExceptionHandler, { useClass: AppExceptionHandler })] 
) 

Answer 5

参照：ErrorHandlerクラス。 DIを達成するためにInjectableデコレータを追加することもできます！

import { ErrorHandler, Injectable } from '@angular/core'; 
 

 
@Injectable() 
 
export class GlobalErrorHandler implements ErrorHandler { 
 

 
    private myService: MyService; 
 

 
    constructor(private injector: Injector) { 
 
    this.myService = injector.get(MyService); 
 
    } 
 

 
    handleError(error) { 
 
    alert('Bad things happening'); 
 
    } 
 
    
 
} 
 

 
@NgModule({ 
 
    providers: [ 
 
    { 
 
     provide: ErrorHandler, 
 
     useClass: GlobalErrorHandler 
 
    } 
 
    ] 
 
}) 
 
export class AppModule { }

注：上記の答えはExceptionHandlerを使用ErrorHandlerの賛成で最終リリースで除去されます。

Answer 6

だから私は今日似たようなものに遭遇しました。私の状況は少し異なりますが、私はルータを必要とするHttpを拡張しました。しかし、ErrorHandlerにはHttpも必要でした。上記のFactoryメソッドを使用して、私はHTTPHandlerにHttpを挿入できると思った。私は、ErrorHandlerがHttpのコンストラクタでDependency Injectionを呼び出したときに、ルータが存在しなかったことを知りました。

私はインジェクタに、私は、関数の呼び出し中にインスタンスを取得し、コンストラクタではありません。インジェクタが実際にHttpを取得しようとするとき（呼び出し時）、適切なコンテキスト内ですでに作成されています。

CustomErrorHandler.ts：CustomHttpService.tsから

import { ErrorHandler, Injector } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { environment } from 'environments/environment'; 

export class CustomErrorHandler extends ErrorHandler { 
    private http: Http; 
    constructor(private injector: Injector) { 
    super(); 
    // Calling this.injector.get(Http); here resulted in a null Router 

    window.onerror = (msg: any, url: any, line: any, col: any, error: any) => { 
     this.handleError(msg); 
     return true; 
    }; 
    } 

    public handleError(error: any): void { 
    try { 
     // calling the injector here gave the application the time to build the correct context for the dependency injection that Http needed. 
     if (!this.http) { 
     this.http = this.injector.get(Http); 
     } 
     if (!error) { 
     error = 'Unknown Error'; 
     } 
     console.error(error); 
     this.http.post('logtoserver/LogError', { Message: error.message, StackTrace: error.stack }); 
    } catch (exception) { 
     // ignore 
    } 
    } 
} 

関連部品：

@Injectable() 
export class CustomHttpService extends Http { 

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private router: Router, private injector: Injector) { 
    super(backend, defaultOptions); 
    } 

    request(urlOrRequest: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    // We needed Router here to call this.router.navigate(['...']); 
    // ... 
    } 
} 

app.module.ts：

import { NgModule, ErrorHandler, Injector } from '@angular/core'; 
import { Http, RequestOptions, XHRBackend } from '@angular/http'; 
import { CustomErrorHandler } from 'app/customErrorHandler'; 
// ... 

export function customHttpServiceFactory(xhrBackend, requestOptions, router, injector) { 
    return new CustomHttpService(xhrBackend, requestOptions, router, injector); 
} 

export function customErrorHandler(injector) { 
    return new CustomErrorHandler(injector); 
} 

@NgModule({ 
    declarations: [ 
    ... 
    ], 
    imports: [ 
    ... 
    ], 
    providers: [ 
    { provide: Http, useFactory: customHttpServiceFactory, deps: [XHRBackend, RequestOptions, Router, Injector] }, 
    // { provide: UrlSerializer, useClass: LowercaseUrlSerializer }, 
    { provide: ErrorHandler, useFactory: customErrorHandler, deps: [Injector] }, 
    ... 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {}