Блог

Главная - Вопросы по программированию - Получение ошибки неперехваченного объекта после сборки с помощью Grunt

Получение ошибки неперехваченного объекта после сборки с помощью Grunt

#angularjs #dependency-injection #gruntjs

#angularjs #внедрение зависимостей #gruntjs

Вопрос:

Моя страница перестала работать, когда я запустил команду «grunt build» с моим проектом angularjs, созданным Yeoman. Я получаю следующую ошибку:

Неперехваченный объект 127.0.0.1:9000/bower_components/angular/angular.js:3857

Изображение из источника: https://dl.dropboxusercontent.com/u/2188934/Skjermbilde 2014-07-05 kl. 21.49.26.png

Иногда вместо этого я получаю это: Неперехваченный объект angular.js: 78 https://dl.dropboxusercontent.com/u/2188934/Skjermbilde 2014-07-05 kl. 22.30.46.png

app.js:

 'use strict';

// This is the main js-file where the module corsaneApp is initialized.
angular
  .module('corsaneApp', [ // This is all the external angular directives we are using
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'ui.bootstrap',
    'ngAnimate',
    'summernote',
    'ui-sortable'

  ]) // This shows what html file and controller to load when a url is specified.
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      })

      .when('/search', {
        templateUrl : 'views/home.html',
        controller  : 'SearchCtrl'
      })

      .when('/submit', {
        templateUrl : 'views/submit.html',
        controller  : 'SubmitCtrl'
      })

      .when('/playlist', {
        templateUrl : 'views/home.html',
        controller  : 'PlaylistCtrl'
      })

      .when('/playlistbar', {
        templateUrl : 'views/playlistbar.html',
        controller  : 'PlaylistbarCtrl'
      })

      .when('/resource', {
        templateUrl : 'views/resource.html',
        controller  : 'ResourceCtrl'
      })

      .otherwise({
        redirectTo: '/'
      });

  }]);

index.html:

 <!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app="corsaneApp"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/bootstrap-lumen.css">
    <link rel="stylesheet" href="styles/animations.css">
    <link rel="stylesheet" href="styles/global.css">
    <link rel="stylesheet" href="styles/submit.css">
    <link rel="stylesheet" href="styles/search.css">
    <link rel="stylesheet" href="styles/playlist.css">
    <link rel="stylesheet" href="styles/sidebar.css">
    <link rel="stylesheet" href="styles/resource.css">
    <link rel="stylesheet" href="styles/home.css">
    <link rel="stylesheet" href="styles/playlistbar.css">
    <link rel="stylesheet" href="styles/resourceinfo.css">
    <link rel="stylesheet" type="text/css" href="bower_components/summernote/dist/summernote.css">

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">



    <!-- endbuild -->
  </head>
  <body ng-controller="HomeCtrl" >
    <div ng-include src="'views/navbar.html'"></div>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container">
        <div ng-view></div>        
    </div>       

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
 <!--    <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script> -->

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
    <script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/fitvids/jquery.fitvids.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/home.js"></script>
    <script src="scripts/controllers/playlist.js"></script>
    <script src="scripts/filters/reverse.js"></script>
    <script src="scripts/controllers/search.js"></script>
    <script src="scripts/controllers/submit.js"></script>
    <script src="scripts/controllers/navbar.js"></script>
    <script src="scripts/services/resource.js"></script>
    <script src="scripts/controllers/playlistbar.js"></script>
    <script src="scripts/controllers/resource.js"></script>
    <script src="scripts/services/list.js"></script>
    <script src="scripts/directives/resource.js"></script>
    <script src="scripts/controllers/playlistinfo.js"></script>
    <script src="scripts/services/global.js"></script>
    <script src="scripts/directives/sortable.js"></script>

    <!-- endbuild -->

</body>
</html>

сборка grunt:

   grunt.registerTask('build', [
    'clean:dist',
    'bowerInstall',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'rev',
    'usemin',
    'htmlmin'
  ]);

Очевидно, что что-то идет не так, когда код сокращается. Я предполагаю, что это как-то связано с внедрением зависимостей, но я также почти уверен, что делаю это правильно (например, в app.js ).

Комментарии:

1. Попробуйте использовать отладчик Safari. Вы получите фактическое сообщение об ошибке от Angular. Черт возьми, я недавно тоже испытал это и получил эту ошибку: bpaste.net/show/0Pj4hkl8Gc2XyVIjWFyL после минимизации. Я также использую Lineman.js и их шаблона Angular.

Ответ №1:

Хорошо, итак, прежде всего, в отладчике Chrome есть ошибка (по иронии судьбы), из-за которой сообщение об ошибке отображается не полностью. Смотрите эту статью для получения дополнительной информации: http://www.congral.com/2014/05/29/have-you-already-encountered-the-uncaught-object-exception /

После некоторого копания я обнаружил, что причиной ошибки неперехваченного объекта была моя зависимость summernote. Ссылка https://docs.angularjs.org/error / $injector /nomod , Angular Docs сообщает мне: «Вы либо неправильно написали имя модуля, либо забыли его загрузить». Однако эта ошибка возникла не потому, что я забыл ее загрузить, а скорее потому, что она была удалена Grunt во время сборки. Это произошло потому, что я загрузил свой скрипт в тег «bower: js», вот так:

 <!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/summernote/dist/summernote.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
<!-- endbower -->
<!-- endbuild -->

Когда я переместил его за пределы «endbower», все работало нормально.

 <!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<script src="bower_components/summernote/dist/summernote.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
<!-- endbuild -->

Учитывая, что я действительно установил summernote с помощью bower, я нахожу это каким-то странным. Хотелось бы получить дополнительную информацию об этой проблеме.