George Edwards George Edwards - 10 months ago 59
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>
<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">

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

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

<script src="/js/dependencies/"></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>


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

and then this is where it is used

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: $,
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

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

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


Answer Source

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