AngularAMD and RequireJS, sometimes not load AngularJS filter

Question

I try implement lazy loading front-end app using requirejs, angularAMD and angular, but sometimes app not found 'getProfit' filter and I got:

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;

          };
    });
    ......

I've noticed, that error occurs before define filter because console print 'Load main app code' after error. But after refresh (sometime not one refresh) app start work normal. Also I want to mention, maybe it is important, getProfit filter I use on html <span>{{p | getProfit}}</span>.

Answer 1

Problem seem like occurs in your indexApp.js file. Because you use both define('app',[]) and require(['app']) in a same module without synchronization their loading order.

There will be 2 solutions:

1. Move all the content in require() block to define() block.

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. Move all the content in require() block to another file (module). Then using angularAMD.filter instead of app.filter

Assuming this file will be filter.js and in the same directory with 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;

          };
    });
});

Then in your indexApp.js . Load the filter.js module.

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