Обнаружена циклическая зависимость при попытке добавить toastr в пользовательский регистратор

Question

Я пытался использовать подход, продемонстрированный Джоном Папой, где у меня есть обработчик исключений, и этот обработчик исключений вызывает в класс регистратора. Этот регистратор может затем выполнять различные действия, такие как вход в консоль, базу данных или сообщение toastr. У меня все это работает, но я не могу понять, как только я добавляю ссылку на тостер, я получаю следующее сообщение.

[$injector:cdep] Circular dependency found: $rootScope <- $q <- $$AnimateRunner <- $$animateQueue <- $animate <- toastr <- logger <- $exceptionHandler <- $rootScope

Я использую TypeScript, чтобы настроить это, и единственное другое место, где у меня есть ссылка на toastr, находится в настройке модели, где я передаю зависимость в регистратор, и у меня также есть функция config, где она устанавливает конфигурацию toaster.

toastrConfig.$inject = ['toastrConfig'];
/** @ngInject */
export function toastrConfig(toastrConfig: ToastrOptions) {
// var toastrConfig = toastr.options;
(<any>toastrConfig).allowHtml = true;
toastrConfig.timeOut = 3000;
toastrConfig.positionClass = 'toast-top-right';
toastrConfig.progressBar = true;
}


angular
    .module('blocks.logger', ['toastr'])
    .service('logger', Logger);

Затем я пытаюсь сделать что-то простое, как это:

export class Logger implements ILogger {
static $inject: Array<string> = ['toastr'];
constructor(private toastr) { }

log(...args: any[]) {
    ////this.$log.log(args);
}

error(message: string, data?: {}, title?: string) {
    toastr.error(message);
}

Я не вижу, где я бы удвоил зависимость. Какие-нибудь мысли? По ошибке похоже, что я возвращаюсь к $ rootScope, но я не знаю как. Я предполагаю, что это как-то связано с исключением установки HandlerProvider, так что вот так.

import { ILogger } from '../logger/logger';

// The exceptionHandler provider handles any unhandled exceptions and logs the exception to the console window
 // then calls the Logger to log the exception to the server side

 export interface IExceptionHandlerConfig {
appErrorPrefix: string
}
export class ExceptionHandlerProvider {
static $inject: Array<string> = [];
constructor() { }

config: IExceptionHandlerConfig = {
    appErrorPrefix: undefined
}

configure(appErrorPrefix: any) {
    this.config.appErrorPrefix = appErrorPrefix;
}

$get: () => { config: IExceptionHandlerConfig } = () => { return { config: this.config }; }
}

exceptionHandlerProviderConfig.$inject = ['$provide'];
export function exceptionHandlerProviderConfig($provide:     ng.auto.IProvideService) {
$provide.decorator('$exceptionHandler', extendExceptionHandler);
}

extendExceptionHandler.$inject = ['$delegate', 'exceptionHandler', 'logger'];

function extendExceptionHandler($delegate: ng.IExceptionHandlerService,
exceptionHandlerProvider: ExceptionHandlerProvider,
logger: ILogger) {
return function (exception: any, cause: any) {
    var appErrorPrefix = exceptionHandlerProvider.config.appErrorPrefix || '';
    var errorData = { exception: exception, cause: cause };
    exception.message = appErrorPrefix + exception.message;
    $delegate(exception, cause);    // Logs to the console

    /**
     * Could add the error to a service's collection,
     * add errors to $rootScope, log errors to remote web server,
     * or log locally. Or throw hard. It is entirely up to you.
     * throw exception;
     *
     * @example
     *     throw { message: 'error message we added' };
     */
    logger.error(exception.message, errorData);
};
}

Answer 1

В вашем классе логгера у вас есть:

error(message: string, data?: {}, title?: string) {
    toastr.error(message);
}

Но toastr определяется в области видимости класса, поэтому вам нужно будет обратиться к нему с помощью:

this.toastr.error(message);