AngularAMD и RequireJS, иногда не загружается AngularJS фильтра

Question

я пытаюсь реализовать ленивые загрузки фронтального приложения с помощью requirejs, angularAMD и угловатого, но иногда приложения не найдено фильтра «getProfit» и я получил:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.2/$injector/unpr?p0=getProfitFilterProvider%20%3C-%20getProfitFilter 

main.js

if(document.location.hostname == "localhost")var ghost = "http://localhost:8080/project/"; 
else var ghost = "/";  

require.config({ 
    baseUrl: ghost+"resources/web/app/", 
    paths: { 
     'angular'  : '//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min', 
     'angularAMD' : '//cdn.jsdelivr.net/angular.amd/0.2.0/angularAMD.min', 
     'boostrapMin' : ghost+'resources/web/js/bootstrap.min', 
     'jQuery'  : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', 
     'boostrap-angular-ui' : 'https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min', 
     'howCtrl'  : ghost+'resources/web/app/controllers/howCtrl', 
     'depositBoxCtrl': ghost+'resources/web/app/controllers/depositBoxCtrl', 
     'calendarCtrl' : ghost+'resources/web/app/controllers/calendarCtrl', 
     'labCtrl'  : ghost+'resources/web/app/controllers/labCtrl', 
     'urlSer'  : ghost+'resources/web/app/services/urlSer', 
     'userSer'  : ghost+'resources/web/app/services/userSer', 
     'chartSer'  : ghost+'resources/web/app/services/chartSer', 
     'dialogService': ghost+'resources/web/app/services/dialogsSer', 
     'paymentsSer' : ghost+'resources/web/app/services/paymentsSer', 
     'daterService' : ghost+'resources/web/app/services/dateSer', 
     'statsCounter' : ghost+'resources/web/app/services/statsCounter', 
     'directives' : ghost+'resources/web/app/directives/directives', 
     'filters'  : ghost+'resources/web/app/filters/filters', 
     'oddsFilter' : ghost+'resources/web/app/filters/oddsFilter', 
     'n3-line-chart': ghost+'resources/web/js/bower_components/n3-line-chart/build/line-chart.min', 
     'd3'   : 'http://d3js.org/d3.v3.min', 
     //'d3'   : ghost+'/resources/web/js/bower_components/d3/d3.min', 
     'n3-pie-chart' : ghost+'resources/web/js/bower_components/n3-charts.pie-chart/dist/pie-chart.min', 
     'nvd3ChartDirectives' : ghost+'resources/web/js/bower_components/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.min', 
     'nvd3'   : ghost+'resources/web/js/bower_components/nvd3/nv.d3.min', 
     'jquery.sparkline': ghost+'resources/web/js/jquery.sparkline.min', 
     'matchesApp' : ghost+'resources/web/app/matchesApp', 
     'labApp'  : ghost+'resources/web/app/labApp' 
}  
    shim: { 
     'boostrapMin' : ['jQuery'], 
     'boostrap-angular-ui': ['angular','jQuery','boostrapMin'], 
     'n3-line-chart' : ['angular'], 
     'n3-pie-chart' : ['angular'], 
     'nvd3ChartDirectives' : ['angular'], 
     'jquery.sparkline' : ['jQuery'], 
     'angularAMD': ['angular'], 
     'nvd3' : ['d3'], 
     'howCtrl' : ['d3','nvd3'],   
    }, 


    deps: ['indexApp'] 
}); 

indexApp.js:

define("app",['angularAMD','boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives'], function (angularAMD) { 
    'use strict'; 

    console.log("webApp initilization..."); 

    var webApp = angular.module('webApp',['ui.bootstrap','n3-line-chart','n3-pie-chart','nvd3ChartDirectives']); 

    webApp.config(function($httpProvider,$locationProvider) { 

     $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; 
     $locationProvider.html5Mode({enabled:true,requireBase: false,rewriteLinks:false}); 
    }) 

    return angularAMD.bootstrap(webApp); 
}); 

require(['app',"jquery.sparkline"], function(app) { 
    'use strict'; 

    console.log("Load main app code ....", app); 
    // add getProfit filter too app 
    app.filter('getProfit', function() { 
     return function (pick) { 
       if(pick.wl)return Math.round((pick.bOdd-1) * 100)/100; 
       return -1; 

      }; 
    }); 
    ...... 

Я заметил, что ошибка возникает перед фильтром определения, потому что консоль печатает «Загрузить основной код приложения» после ошибки. Но после обновления (когда-то не одного обновления) приложение начнет работать нормально. Также хочу упомянуть, может быть, это важно, фильтр getProfit, который я использую на html <span>{{p | getProfit}}</span>.

Answer 1

Проблема, похоже, происходит в вашем файле indexApp.js. Потому что вы используете как define('app',[]), так и require(['app']) в одном модуле без синхронизации их порядка загрузки.

Там будет 2 решения:

1. Переместить все содержимое в require() блока к блоку define().

define("app",['angularAMD','boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives', 'jquery.sparkline'], function (angularAMD) { 
    'use strict'; 

    console.log("webApp initilization..."); 

    var webApp = angular.module('webApp',['ui.bootstrap','n3-line-chart','n3-pie-chart','nvd3ChartDirectives']); 

    webApp.config(function($httpProvider,$locationProvider) { 

     $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; 
     $locationProvider.html5Mode({enabled:true,requireBase: false,rewriteLinks:false}); 
    }) 

    console.log("Load main app code ....", app); 
    // add getProfit filter too app 
    app.filter('getProfit', function() { 
     return function (pick) { 
      if(pick.wl)return Math.round((pick.bOdd-1) * 100)/100; 
      return -1; 
     }; 
    }); 

    return angularAMD.bootstrap(webApp); 
}); 

2. Переместить все содержимое в require() блока в другой файл (модуль). Затем с помощью angularAMD.filter вместо app.filter

Если предположить, что этот файл будет filter.js и в том же каталоге с indexApp.js

define(["angularAMD", "jquery.sparkline"], function(angularAMD) { 
    'use strict'; 

    console.log("Load main app code ...."); 
    // add getProfit filter too app 
    angularAMD.filter('getProfit', function() { 
     return function (pick) { 
       if(pick.wl)return Math.round((pick.bOdd-1) * 100)/100; 
       return -1; 

      }; 
    }); 
}); 

Тогда в вашем indexApp.js. Загрузите модуль filter.js.

define("app",['angularAMD', 'boostrap-angular-ui','n3-line-chart','n3-pie-chart','nvd3ChartDirectives', 'filter'], function (angularAMD) {