Question

所以我一直在努力缩小我的代码，但这并不是一件轻松的事。

如果没有任何缩小或捆绑，一切都有效。我被告知要做的第一件事就是不要先缩小，然后添加＆＃34; ng-strict-di＆＃34;到ng-app元素。因此，当我处理所有抛出的错误时，我可以毫无问题地缩小。

<html lang="en" ng-app="myApp" ng-strict-di>

我刷新了页面，然后我收到了错误。

JavaScript error: Uncaught Error: [$injector:modulerr] Failed to instantiate
module myApp due to:
Error: [$injector:strictdi] function(toastrConfig) is not using explicit
annotation and cannot be invoked in strict mode

这是我使用的图书馆：https://github.com/Foxandxss/angular-toastr

在文档中，它展示了如何将全局配置应用于我的所有toastrs：

app.config(function(toastrConfig) {
  angular.extend(toastrConfig, {
    allowHtml: false,
    closeButton: false,
    closeHtml: '<button>&times;</button>',
    extendedTimeOut: 1000,
    iconClasses: {
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning'
    },  
    messageClass: 'toast-message',
    onHidden: null,
    onShown: null,
    onTap: null,
    progressBar: false,
    tapToDismiss: true,
    templates: {
      toast: 'directives/toast/toast.html',
      progressbar: 'directives/progressbar/progressbar.html'
    },
    timeOut: 5000,
    titleClass: 'toast-title',
    toastClass: 'toast'
  });
});

如果我删除ng-strict-di，一切都有效，但是当我应用它时......它会出错。如果我删除app.config代码，一切正常..但我需要这个，因为我在我的应用程序中有很多toastr通知。那么这里发生了什么？我无法在角度文档中找到与此相关的任何内容，并且它表明我正确使用了app.config，为什么这是一个问题？

Answer 1

浏览我评论过的链接，经过一番仔细检查后，我相信（从来没有使用过这个）你的问题是你需要有角度来隐含地找出你想要的提供商。在严格模式下（我发送给你的那个链接），你必须明确地定义它们。以下是Angular文档中的一个示例。

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

注意数组语法。

所以对你来说，试试

app.config(['toastrConfig',function(toastrConfig) {
  angular.extend(toastrConfig, {
    allowHtml: false,
    closeButton: false,
    closeHtml: '<button>&times;</button>',
    extendedTimeOut: 1000,
    iconClasses: {
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning'
    },  
    messageClass: 'toast-message',
    onHidden: null,
    onShown: null,
    onTap: null,
    progressBar: false,
    tapToDismiss: true,
    templates: {
      toast: 'directives/toast/toast.html',
      progressbar: 'directives/progressbar/progressbar.html'
    },
    timeOut: 5000,
    titleClass: 'toast-title',
    toastClass: 'toast'
  });
}]);

Answer 2

我认为您需要'toastrConfig'和.config

中的.extend

app.config(['toastrConfig',function(toastrConfig) {
  angular.extend(['toastrConfig', toastrConfig, {
    allowHtml: false,
    closeButton: false,
    closeHtml: '<button>&times;</button>',
    extendedTimeOut: 1000,
    iconClasses: {
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning'
    },  
    messageClass: 'toast-message',
    onHidden: null,
    onShown: null,
    onTap: null,
    progressBar: false,
    tapToDismiss: true,
    templates: {
      toast: 'directives/toast/toast.html',
      progressbar: 'directives/progressbar/progressbar.html'
    },
    timeOut: 5000,
    titleClass: 'toast-title',
    toastClass: 'toast'
  }]);
}]);

来源：https://docs.angularjs.org/guide/di

使用显式表示法在app.config（）

2 个答案: