IE 8 incompatibility due to indexOf usage

[sambiomatters]

At the moment lazy load is incompatible with IE8 due to use of indexOf. Could a workaround be added, maybe just a simple implementation of Array.prototype.indexOf?

[ocombe]

I should be able to work around by using something else, but you can easily
find a lot of shims for that on the internet already :-)

[sambiomatters]

I ended up just adding the following to the top, but figured you may have a preferred way. It's otherwise compatible with IE8 (at least so far as I have experienced)

if (!Array.prototype.indexOf)
{
    Array.prototype.indexOf = function(elt /*, from*/)
    {
        var len = this.length >>> 0;

        var from = Number(arguments[1]) || 0;
        from = (from < 0)
            ? Math.ceil(from)
            : Math.floor(from);
        if (from < 0)
            from += len;

        for (; from < len; from++)
        {
            if (from in this &&
                this[from] === elt)
                return from;
        }
        return -1;
    };
}

[ocombe]

Ok thanks. I'll see what I can do after my holydays :-)

[vikashait]

Thanks Sambi for you temp fix. All module is getting loaded correctly bu I see weird error logs in firfox console which is pretty annoying. Not sure of side effects though

@ocombe : will you be able to look into this firefox error (version: 31)

Error: [$injector:modulerr] Failed to instantiate module mainApp due to:
[$injector:nomod] Module 'mainApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.10/$injector/nomod?p0=mainApp
minErr/<@http://localhost:9000/assets/javascripts/lib/angular.js:78:5
module/<@http://localhost:9000/assets/javascripts/lib/angular.js:1531:1
ensure@http://localhost:9000/assets/javascripts/lib/angular.js:1454:5
module@http://localhost:9000/assets/javascripts/lib/angular.js:1527:7
loadModules/<@http://localhost:9000/assets/javascripts/lib/angular.js:3620:11
forEach@http://localhost:9000/assets/javascripts/lib/angular.js:303:7
loadModules@http://localhost:9000/assets/javascripts/lib/angular.js:3614:5
createInjector@http://localhost:9000/assets/javascripts/lib/angular.js:3554:3
bootstrap/doBootstrap@http://localhost:9000/assets/javascripts/lib/angular.js:1299:9
bootstrap@http://localhost:9000/assets/javascripts/lib/angular.js:1314:5
angularInit@http://localhost:9000/assets/javascripts/lib/angular.js:1263:37
@http://localhost:9000/assets/javascripts/lib/angular.js:20589:5
jQuery.Callbacks/fire@http://localhost:9000/assets/javascripts/lib/jquery-1.11.1.js:3119:1
jQuery.Callbacks/self.add@http://localhost:9000/assets/javascripts/lib/jquery-1.11.1.js:3165:7
jQuery.fn.ready@http://localhost:9000/assets/javascripts/lib/jquery-1.11.1.js:3399:2
@http://localhost:9000/assets/javascripts/lib/angular.js:20588:3
@http://localhost:9000/assets/javascripts/lib/angular.js:20592:1

[ocombe]

Yes but not until next week

[vikashait]

sure! enjoy your vacations!

[ocombe]

@vikashait your log points to a call to an unloaded module, any chance to get your code to see where the error is ?
It's probably a question of resolve or race condition

[vikashait]

Here is my main.js file (using requireJS)

          requirejs.config({
    paths: {
    'jquery': 'lib/jquery-1.11.1',
    'angular':'lib/angular',
    'ui-router':"lib/angular-ui-router",
    'ui.bootstrap':"lib/ui-bootstrap-tpls-0.11.0",
    'ngRoute' : 'lib/angular-route',
    'ocLazyLoad':'lib/ocLazyLoad',
    'underscore' : 'lib/underscore',
    'ngResource' :'lib/angular-resource.min',
    'mainApp': 'modules/mainApp'
    },

    shim:{
    'angular': ['jquery'],
    'ngRoute' : ['angular'],
    'ocLazyLoad': ['angular'],
    'ui-router': ['angular'],
    'ui.bootstrap': ['angular'],
    'ngResource' : ['angular'],
    'underscore' :{
        exports: "_"
    },
    'mainApp': ['ocLazyLoad',"underscore",'ngRoute', 'ui-router',                            ui.bootstrap','ngResource']
       }
 });


    requirejs(['mainApp'], function() {
angular.bootstrap(document.body, ['mainApp']);

---

Here is my config file....

      angular.module('mainApp', ['oc.lazyLoad', 'ngRoute', 'ui.router', 'ui.bootstrap', "ngResource" ])
          .config(['$ocLazyLoadProvider', function ($ocLazyLoadProvider) {
           $ocLazyLoadProvider.config({
        loadedModules: ['mainApp'],
        jsLoader: requirejs,
        debug: true
             });
                       }]).config(['$stateProvider', '$locationProvider', '$urlRouterProvider',function         ($stateProvider,            $locationProvider, $urlRouterProvider) {
    $locationProvider.hashPrefix('!');

    $stateProvider
        .state('index', {
            url: "/",
            views: {
                "indexView": {controller: 'mainCtrl',
                    templateUrl: 'assets/html/partials/main.html'
                }
            },
            resolve: {
                loadMainCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'mainApp',
                        files: [
                            'assets/javascripts/modules/mainApp.js',
                            'assets/javascripts/controllers/mainCtrl.js',
                            'assets/javascripts/services/Props.js',
                            'assets/javascripts/services/JsonService.js',
                            'assets/javascripts/services/TemplateManager.js',
                            'assets/javascripts/directives/simpleProperty.js',
                            'assets/javascripts/directives/uriProperty.js',
                            'assets/javascripts/directives/multiplevaluesProperty.js',
                            'assets/javascripts/directives/structProperty.js',
                            'assets/javascripts/directives/valueArrayProperty.js',
                            'assets/javascripts/directives/aspect.js',
                            'assets/javascripts/directives/entity.js'
                        ]});
                }],
                loadAppConfig: ['$rootScope','$http','$q', function($rootScope,$http,$q) {
                    var deferred = $q.defer();

                   var promise = $http.get('assets/config/templateConfig.json')
                        .success(function (response) {
                            $rootScope.config=response;
                           $rootScope.$broadcast("config", response);
                           deferred.resolve();
                        }).error(function (error) {
                            console.error("Error Occurred in retrieving the TemplateConfig file");
                        });
                    return deferred.promise;
                }]
            }


        });
    $urlRouterProvider.otherwise("/");
    return $locationProvider.html5Mode(true);
            }]).value("url", "");



       });

[vikashait]

Basically I used both requirejs to configure js dependencies and then used iui-router with your library

[ocombe]

Ok thanks I'll check this tomorrow !

[vikashait]

Thanks

[ocombe]

Ok I see something weird in your code, you are trying to lazy load the mainApp module in the mainApp module:

return $ocLazyLoad.load({
  name: 'mainApp',
  files: [
    'assets/javascripts/modules/mainApp.js',
    'assets/javascripts/controllers/mainCtrl.js',
    'assets/javascripts/services/Props.js',
    'assets/javascripts/services/JsonService.js',
    'assets/javascripts/services/TemplateManager.js',
    'assets/javascripts/directives/simpleProperty.js',
    'assets/javascripts/directives/uriProperty.js',
    'assets/javascripts/directives/multiplevaluesProperty.js',
    'assets/javascripts/directives/structProperty.js',
    'assets/javascripts/directives/valueArrayProperty.js',
    'assets/javascripts/directives/aspect.js',
    'assets/javascripts/directives/entity.js'
  ]});

The first line 'assets/javascripts/modules/mainApp.js' should not be there since your mainApp module is already loaded.

It may work anyway because the lib tries not to reload something already loaded (unless you explicitly ask it), but it's worth mentioning even if I don't think it's the error here.

When I look at the log that you provided, it seems that it throws the error when you are bootstrapping the app (when the app is first loading). It's more probable that the problem is in the requirejs config, but I'm no expert here and I don't have all the files so I'm not sure what is wrong...

Take a look at https://github.com/kbdaitch/ui-router-lazy-example/tree/gh-pages it may help you configure your project correctly.

[vikashait]

Ok I removed 'assets/javascripts/modules/mainApp.js', entry but as you mentioned problem is still there.. I will look into the link and will try to see where the problem is and will update you. thanks

[ocombe]

Could you try version 0.3.6 and tell me if it works with it please ?

[sambiomatters]

My Issue was fixed in 0.3.6 by the way. Thanks!

[ocombe]

Ok, what about you @vikashait ?

[ocombe]

I'm closing this now due to inactivity, add a comment if you need to have it reopened.