javascript - 未知提供者:toasterProvider <-toaster <-RugHttpInterceptor <-$ http <-ng1UIRouter

如果我的应用在responseError代码中捕获到http错误，我正在使用Interceptor来显示吐司味精。
我正在使用AngularJS拦截器。这是一个MEAN.JS应用程序。

拦截器代码

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

错误：


我正试图找出解决方案，但数小时内就卡住了...

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

脚本和CSS
使用npm install并添加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>
...

最佳答案

主应用程序中缺少angularjs-toaster模块：

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

您可以从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");
    };
  });

您还需要在主模板（angularjs-toaster）中包括index.html模块。这是文档中的示例：

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

关于javascript - 未知提供者:toasterProvider <-toaster <-RugHttpInterceptor <-$ http <-ng1UIRouter，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37665795/