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

Uncaught Error: [$injector:modulerr] Failed to instantiate module toastr

本文关键字：实例化 toastr 模块 modulerr 错误 injector      更新时间：2023-09-26

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

ncatch 错误： [$injector：modulerr] 由于以下原因，无法实例化模块主页模块： 错误： [$injector：模块rr] 由于以下原因，无法实例化模块 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;
    });
  };

}]);

有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");
        };
    });

首先包含角度 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");
    };
});

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

不要忘记添加依赖项Angular.module（'app'， ['toastr']）

在

我自己的情况下，我记得包含我的应用程序.js脚本。

相关文章：