Unknown provider: toasterProvider <- toaster <- RugHttpInterceptor <- $http <- ng1UIRouter

Question

I am working on Interceptors to display a toast msg if my app caught a http error in responseError code. I am using AngularJS Interceptor. It is an MEAN.JS app.

Interceptor Code

angular.module('rugCoPro')

.factory('RugHttpInterceptor', ['$q', 'Session', '$state', 'toaster',
function($q, session, $state, toaster) {

    return {        
        'request': function(config) {
            console.log("inside the request."); 
            return config;
        },       

        // Optional method        
        'response': function(response) {
            // do something on response success
            console.log('inside of response');

            return response;
        },

        // optional method 
        'responseError': function(rejection) {
            // Here you can do something in response error, like handle errors, present error messages etc.
            if(rejection.status === 401){
                console.log( "inside the response error : "+ rejection.status);
                $state.go('auth');
            }

            // console.log("inside the response error " + rejection.status);
            return $q.reject(rejection);
        }
    };
}]);

error:

I am trying to find out the solution but stuck from hours...

app.js

angular.module('rugCoPro', [
    'ngMaterial',
    'ngMdIcons',
    'ui.router',
    'e3-core-ui.services', 
    'e3-core-ui.utils'  
])

.config(['$stateProvider', '$routeProvider','$httpProvider','$mdThemingProvider', '$mdIconProvider', function($stateProvider, $routeProvider, $httpProvider, $mdThemingProvider, $mdIconProvider) { 

        //rug interceptor code
    $httpProvider.interceptors.push('RugHttpInterceptor');
...
}

Scripts and css using npm install and add in gruntfile.js

"node_modules/angularjs-toaster/toaster.css",
"node_modules/angularjs-toaster/toaster.js",

Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['front-end/src/*.js', 'front-end/src/controllers/**/*.js', 'front-end/src/services/**/*.js'],
        dest: 'public/js/<%= pkg.name %>.min.js'
      },
      lib:{
        src: [
          "node_modules/angular/angular.min.js",
          "node_modules/angular-route/angular-route.min.js",
          "node_modules/angular-aria/angular-aria.min.js",
          "node_modules/angular-animate/angular-animate.min.js",
          "node_modules/angular-material/angular-material.min.js",
          "node_modules/moment/moment.min.js",
          "front-end/lib/e3-core-ui.js",
          **// angularjs -toaster
          "node_modules/angularjs-toaster/toaster.min.js",**
          "node_modules/angular-material-icons/angular-material-icons.min.js",
          "node_modules/angular-ui-router/release/angular-ui-router.min.js"
        ],
        dest: 'public/js/libs.min.js'
      },
      lib_debug:{
        src: [
          "node_modules/angular/angular.js",
          "node_modules/angular-route/angular-route.js",
          "node_modules/angular-aria/angular-aria.js",
          "node_modules/angular-animate/angular-animate.js",
          "node_modules/angular-material/angular-material.js",
          "node_modules/moment/moment.js",
          "front-end/lib/e3-core-ui.js",
          **// angularjs -toaster
          "node_modules/angularjs-toaster/toaster.js",**
          "node_modules/angular-material-icons/angular-material-icons.js",
          "node_modules/angular-ui-router/release/angular-ui-router.js"
        ],
        dest: 'public/js/libs.js'
      },
      css:{
        src:[
          "node_modules/angular-material/angular-material.css",
          "front-end/lib/e3-core-style.min.css",
          "front-end/style/app.css",
          **// angularjs -toaster
          "node_modules/angularjs-toaster/toaster.css",**
        ],
        dest:'public/css/lib.css'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'public/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jasmine');
  grunt.loadNpmTasks('grunt-jasmine-node-new');

  /*grunt.registerTask('cleanup', 'cleans build tmp files', function(){
    var gruntConfig = grunt.config();
    grunt.file.delete(gruntConfig.concat.dist.dest);
  });*/

  grunt.registerTask('default', ['concat', 'uglify', 'jasmine_node', 'jasmine'/*, 'cleanup'*/]);
  grunt.registerTask('debug', ['concat', 'jasmine_node', 'jasmine']);


};

index.html

<html>
    <head>
        <% include partials/header.ejs %>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="/css/lib.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

    <body ng-app="rugCoPro" ng-controller="MainController as ctrl" layout="column">
        <!script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>

        <script src="/js/libs.js"></script> 
        <script src="/js/rugcopro.min.js"></script> 
...

Answer 1

The angularjs-toaster module is missing from your main application:

angular.module('rugCoPro', [
    'ngMaterial',
    'ngMdIcons',
    'ui.router',
    'toaster', // This was missing from your code
    'e3-core-ui.services', 
    'e3-core-ui.utils'  
]);

You can view an example from the angularjs-toaster README:

// Display an info toast with no title
angular.module('main', ['toaster', 'ngAnimate'])
  .controller('myController', function($scope, toaster) {
    $scope.pop = function(){
      toaster.pop('success', "title", "text");
    };
  });

You'll also need to include the angularjs-toaster module in your main template (index.html). Here's an example from the documentation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>

Answer 2

Usually this is because it hasn't been included in your .html.

Ensure this is loaded, after angular.js has been loaded:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>