George Edwards George Edwards - 1 month ago 22
AngularJS Question

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

I am working on a SailsJS web app, using Angular. However, I am running into issues. When I load my page, nothing appears and the copnsole is full of errors, most elating to 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.


As you can see from the page source below, there is a link to toastr, which if I click, it goes to the source file of javascript. I have tried alternating the order so jQuery loads first (doesn't help). What is causing these errors?

<!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']);


and then this is where it is used
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;
});
};


}]);

Answer

There is toastr, which is a toastr JavaScript library and there AngularJS-Toaster, which is an AngularJS toastr library.

You should be using the latter but it seems that you are using the former.

To use the latter in AngularJS try the following (as per the documentation):

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