admin管理员组文章数量:1426913
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_ponents/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_ponents/toastr/toastr.js"></script>
<script src="/bower_ponents/jquery/dist/jquery.js"></script>
<script src="/bower_ponents/angular/angular.js"></script>
<script src="/js/dependencies/pareTo.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', 'pareTo']);
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 bination.
if (sailsResponse.status === 400 || 404) {
toastr.error('Invalid email/password bination.', 'Error', {
closeButton: true
});
return;
}
toastr.error('An unexpected error occurred, please try again.', 'Error', {
closeButton: true
});
return;
})
.finally(function eitherWay(){
$scope.loginForm.loading = false;
});
};
}]);
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_ponents/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_ponents/toastr/toastr.js"></script>
<script src="/bower_ponents/jquery/dist/jquery.js"></script>
<script src="/bower_ponents/angular/angular.js"></script>
<script src="/js/dependencies/pareTo.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', 'pareTo']);
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 bination.
if (sailsResponse.status === 400 || 404) {
toastr.error('Invalid email/password bination.', 'Error', {
closeButton: true
});
return;
}
toastr.error('An unexpected error occurred, please try again.', 'Error', {
closeButton: true
});
return;
})
.finally(function eitherWay(){
$scope.loginForm.loading = false;
});
};
}]);
-
Did you add the module as dependency?
angular.module('app', ['toastr'])– michelem Commented Mar 6, 2016 at 10:06 - @Michelem where would I add that? – George Edwards Commented Mar 6, 2016 at 10:07
- Where you initialise your Angular app – michelem Commented Mar 6, 2016 at 10:08
- Update your angular controller ... – Prasad Commented Mar 6, 2016 at 10:15
-
@Michelem I have
angular.module('SignupModule', ['toastr', 'pareTo']);in mysignupmodule.jsand the same inhomepagemodule.js, with the correct module reference... – George Edwards Commented Mar 6, 2016 at 10:22
4 Answers
Reset to default 3There 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");
};
});
Include First angular js and then its dependencies always to avoid this kind of errors
<script src="/bower_ponents/angular/angular.js"></script> in head tag
<script src="/bower_ponents/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_ponents/angular/angular.js"></script> First
<script src="/bower_ponents/toastr/toastr.js"></script> Second
Do not forget adding dependency angular.module('app', ['toastr'])
in my own case, i remembered to include my app.js script .
本文标签： javascriptUncaught Error injectormodulerr Failed to instantiate module toastrStack Overflow
版权声明：本文标题：javascript - Uncaught Error: [$injector:modulerr] Failed to instantiate module toastr - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745487439a2660445.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论