错误：[$injector:unpr] 未知提供者：toastrProvider <- toastr <- toaster答案

【问题标题】：Error: [$injector:unpr] Unknown provider: toastrProvider <- toastr <- toaster错误：[$injector:unpr] 未知提供者：toastrProvider <- toastr <- toaster
【发布时间】：2015-11-11 16:27:17
【问题描述】：

我有一个内置在 TypeScript 中的 Angular 服务，该服务将 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);
}

我尝试了许多不同的解决方案。到目前为止没有任何效果。有什么想法吗？

【问题讨论】：

toastr 服务从何而来？您是否已将其模块声明为应用程序模块的依赖项？抱歉，顺便说一句，票数接近。我读的太快了，还以为你在烤面包机和烤面包机之间有错字。
它没有被声明为对应用程序模块的依赖。在将其转换为 TypeScript 之前，不需要在应用程序模块上声明它。
另外，toastr 是一个外部模块。我从 nuget 引入了 toastr 和输入文件。

标签： angularjs typescript toastr

【解决方案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);
}

我完全移除了注射。现在，这行得通。但它是正确的吗？

【讨论】：

【解决方案2】：

另一种方法：首先将原始 toastr.js 注入到使用 Toastr 类型的值服务中。然后将值服务注入自定义的 NotifierService。这修复了提供者错误，因为价值服务是提供者。不知道这种方法是否是一种改进。将 toastr.js 注入价值服务的想法首先来自 Joe Eames 在 Mean Stack 上的非类型脚本 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);
}

【讨论】：