未捕獲錯誤：[$ injector：modulerr]無法實例化模塊toastr

我正在使用Angular進行SailsJS Web應用程序。但是，我遇到了問題。當我打開我的網頁，沒有出現與copnsole是充滿了錯誤，最elating到angular.js

ncaught Error: [$injector:modulerr] Failed to instantiate module HomepageModule due to: Error: [$injector:modulerr] Failed to instantiate module toastr due to: Error: [$injector:nomod] Module 'toastr' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

正如你可以從下面的網頁源代碼看到，有一個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>

HomePageModule：

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


}]);

來源

2016-03-06 George Edwards

您是否將該模塊添加爲依賴項？ 'angular.module（'app'，['toastr']）' –

@Michelem我會在那裏添加它？ –

你在哪裏初始化你的Angular應用程序 –

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

來源

2016-03-06 10:16:06

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

不要忘記加入依賴性 angular.module（ '應用'，[ 'toastr']）

來源

2016-03-06 10:18:55 regex

恐怕更改順序依然沒有幫助。 –

https://github.com/jirikavi/AngularJS-Toaster – regex

包括第一角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"); 
    }; 
});

來源

2016-03-06 10:47:18 RamaKrishna

在我自己的情況下，我記得包括我的app.js腳本。

來源

2016-10-16 20:01:31

未捕獲錯誤：[$ injector：modulerr]無法實例化模塊toastr

回答

相關問題