未捕获的错误：[$injector:modulerr] 无法实例化模块 toastr答案

【问题标题】：Uncaught Error: [$injector:modulerr] Failed to instantiate module toastr未捕获的错误：[$injector:modulerr] 无法实例化模块 toastr
【发布时间】：2016-03-06 09:57:09
【问题描述】：

我正在使用 Angular 开发 SailsJS 网络应用程序。但是，我遇到了问题。当我加载我的页面时，什么都没有出现，并且 copnsole 充满了错误，最喜欢 angular.js

ncaught 错误：[$injector:modulerr] 无法实例化模块 HomepageModule，原因是：错误：[$injector:modulerr] 无法实例化模块 toastr，原因如下：错误：[$injector:nomod] 模块“toastr”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

从下面的页面源代码中可以看到，有一个 toastr 的链接，如果我点击它，它会转到 javascript 的源文件。我尝试过交替顺序，以便首先加载 jQuery（没有帮助）。是什么导致了这些错误？

<!DOCTYPE html>
<html>
  <head>
    <!--STYLES-->
    <link rel="stylesheet" href="/bower_components/toastr/toastr.css">
    <link rel="stylesheet" href="/styles/angular-toastr.css">
    <link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
    <link rel="stylesheet" href="/styles/importer.css">
    <!--STYLES END-->

    <script type="text/javascript">
    window.SAILS_LOCALS = { _csrf: "null" };
    </script>
  </head>

  <body ng-app="HomepageModule" ng-controller="HomepageController" ng-cloak>
  //content of my page
  </body>

    <!--SCRIPTS-->
    <script src="/js/dependencies/sails.io.js"></script>
    <script src="/bower_components/toastr/toastr.js"></script>
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/js/dependencies/compareTo.module.js"></script>
    <script src="/js/public/signup/SignupModule.js"></script>
    <script src="/js/private/dashboard/DashboardModule.js"></script>
    <script src="/js/public/homepage/HomepageModule.js"></script>
    <script src="/js/private/dashboard/DashboardController.js"></script>
    <script src="/js/public/homepage/HomepageController.js"></script>
    <script src="/js/public/signup/SignupController.js"></script>
    <!--SCRIPTS END-->
  </body>
</html>

主页模块：

angular.module('HomepageModule', ['toastr', 'compareTo']);

然后这是使用它的地方HomepageController：

angular.module('HomepageModule').controller('HomepageController', ['$scope', '$http', 'toastr', function($scope, $http, toastr){

    $scope.loginForm = {
        loading: false
    }

    $scope.submitLoginForm = function (){

    // Set the loading state (i.e. show loading spinner)
    $scope.loginForm.loading = true;

    // Submit request to Sails.
    $http.put('/login', {
      email: $scope.loginForm.email,
      password: $scope.loginForm.password
    })
    .then(function onSuccess (){
      // Refresh the page now that we've been logged in.
      window.location = '/';
    })
    .catch(function onError(sailsResponse) {

      // Handle known error type(s).
      // Invalid username / password combination.
      if (sailsResponse.status === 400 || 404) {

        toastr.error('Invalid email/password combination.', 'Error', {
          closeButton: true
        });
        return;
      }

                toastr.error('An unexpected error occurred, please try again.', 'Error', {
                    closeButton: true
                });
                return;

    })
    .finally(function eitherWay(){
      $scope.loginForm.loading = false;
    });
  };


}]);

【问题讨论】：

您是否将模块添加为依赖项？ angular.module('app', ['toastr'])
@Michelem 我应该在哪里添加？
你在哪里初始化你的 Angular 应用
更新你的角度控制器...
@Michelem 我的signupmodule.js 中有angular.module('SignupModule', ['toastr', 'compareTo']); 和homepagemodule.js 中的相同，具有正确的模块引用...

标签： javascript angularjs sails.js bower

【解决方案1】：

toastr 是一个 toastr JavaScript 库，AngularJS-Toaster 是一个 AngularJS toastr 库。

您应该使用后者，但您似乎使用的是前者。

要在 AngularJS 中使用后者，请尝试以下操作（根据文档）：

angular.module('main', ['toaster', 'ngAnimate'])
    .controller('myController', function($scope, toaster) {
        $scope.pop = function(){
            toaster.pop('success', "title", "text");
        };
    });

【讨论】：

【解决方案2】：

首先包含 Angular js，然后包含它的依赖项，以避免此类错误

<script src="/bower_components/angular/angular.js"></script> in head tag
<script src="/bower_components/toastr/toastr.js"></script> anywhere after head tag


angular.module('HomepageModule', ['toaster', 'ngAnimate'])
.controller('HomepageController', function($scope, toaster) {
    $scope.pop = function(){
        toaster.pop('success', "title", "text");
    };
});

【讨论】：

【解决方案3】：

<script src="/bower_components/angular/angular.js"></script>  First
<script src="/bower_components/toastr/toastr.js"></script>    Second

不要忘记添加依赖 angular.module('app', ['toastr'])

【讨论】：

更改订单恐怕还是没用。

【解决方案4】：

在我自己的情况下，我记得包含我的 app.js 脚本。

【讨论】：