Ошибка: [$ Инжектор: unpr] Неизвестный поставщик: toastrProvider <- toastr <- тостер

Question

У меня есть Угловой сервис, построенный в машинописном, что впрыскивает toastr как зависимость, и я получаю следующее сообщение об ошибке:

Error: [$injector:unpr] Unknown provider: toastrProvider <- toastr <- toaster 

Здесь это услуга:

module app { 
    'use strict';   

    export interface IToasterService { 
     toastrDefaults(): ToastrOptions; 
     success: (text: string, title?: string, optionsOverride?) => void; 
     info: (text: string, title?: string, optionsOverride?) => void; 
     warning: (text: string, title?: string, optionsOverride?) => void; 
     error: (text: string, title?: string, optionsOverride?) => void; 
    } 

    export class ToasterService implements IToasterService { 

     static $inject: Array<string> = ['toastr']; 
     constructor(private toastr: Toastr) { 
     } 

     toastrDefaults(): ToastrOptions { 
      var toastrOptions: ToastrOptions = { 
       timeOut: 2000, 
       extendedTimeOut: 1000, 
       positionClass: "toast-top-right-content" 
      }; 

      return toastrOptions; 
     } 

     success(text, title, optionsOverride) { 
      this.toastrDefaults(); 
      this.toastr.success(text, title, optionsOverride); 
     } 

     info(text, title, optionsOverride) { 
      this.toastrDefaults(); 
      this.toastr.info(text, title, optionsOverride); 
     } 

     warning(text, title, optionsOverride) { 
      this.toastrDefaults(); 
      this.toastr.warning(text, title, optionsOverride); 
     } 

     error(text, title, optionsOverride) { 
      this.toastrDefaults(); 
      this.toastr.error(text, title, optionsOverride); 
     } 
    } 

    angular.module('app').service('toaster', ToasterService); 
} 

Я пробовал ряд различных решений. До сих пор ничего не работало. Есть идеи?

Answer 1

Разочаровывает, этот вопрос уже возопил меня, по крайней мере, месяц, и я, возможно, решил его, хотя я не уверен, насколько он прав. Я собираюсь оставить этот ответ здесь, чтобы другие прокомментировали это, если есть какие-либо последствия для этого исправления.

module app { 
    'use strict';   

    export interface IToasterService { 
     toastrDefaults(): ToastrOptions; 
     success: (text: string, title?: string, optionsOverride?) => void; 
     info: (text: string, title?: string, optionsOverride?) => void; 
     warning: (text: string, title?: string, optionsOverride?) => void; 
     error: (text: string, title?: string, optionsOverride?) => void; 
    } 

    export class ToasterService implements IToasterService { 

     constructor() { 
     } 

     toastrDefaults(): ToastrOptions { 
      var toastrOptions: ToastrOptions = { 
       timeOut: 2000, 
       extendedTimeOut: 1000, 
       positionClass: "toast-top-right-content" 
      }; 

      return toastrOptions; 
     } 

     success(text, title, optionsOverride) { 
      toastrDefaults(); 
      toastr.success(text, title, optionsOverride); 
     } 

     info(text, title, optionsOverride) { 
      toastrDefaults(); 
      toastr.info(text, title, optionsOverride); 
     } 

     warning(text, title, optionsOverride) { 
      toastrDefaults(); 
      toastr.warning(text, title, optionsOverride); 
     } 

     error(text, title, optionsOverride) { 
      toastrDefaults(); 
      toastr.error(text, title, optionsOverride); 
     } 
    } 

    angular.module('app').service('toaster', ToasterService); 
} 

Я полностью удалил инъекцию. Теперь это работает. Но правильно ли это?

Answer 2

Другой подход: сначала введите raw toastr.js в службу значений, используя тип Toastr. Затем добавьте службу значений в пользовательский NotifierService. Это исправляет ошибку поставщика, потому что служба значений является поставщиком. Не знаю, улучшает ли этот подход. Идея инъекции toastr.js в службу стоимости сначала поступала из сценария типа PluralSight, написанного Джо Тимсом в среднем стеке.

`

((): void => { 
    'use strict'; 
    let toasterService: Toastr; 

    angular.module('app.common') 
     .value('toastrService', toastr); 
})(); 

namespace App.Common { 
    'use strict'; 

    export interface INotifier { 
     success(message: string): void; 
     error(message: string): void; 
     warning(message: string): void; 
    } 

    export class Notifier implements INotifier { 
     static $inject = ['toastrService']; 
     constructor(private toastrService: Toastr) { 
      this.toastrService.options = 
      { 
       showDuration: 300, 
       timeOut: 2000, 
       toastClass: 'toast-top-right' 

      }as ToastrOptions; 
     } 

     success(message: string): void { 
      this.toastrService.success(message); 
     } 

     error(message: string): void { 
      this.toastrService.error(message); 
     } 

     warning(message: string): void { 
      this.toastrService.warning(message); 
     } 
    } 

    angular 
     .module('app.common') 
     .service('App.Common.Notifier', Notifier); 
} 

`