Angular JS not working on IE9

Question

I am trying to migrate a webpage to angular JS. Its a simple SPA. It has only the basic components like label, texboxes and dropdowns. I can get the page working on chrome and Firefox. However the perfectly good looking page fails on IE9. In IE9 I cant even get angular JS working. As soon asthe page loads I get following JS errors:

SCRIPT5007: Object expected
angular.js, line 318 character 12
SCRIPT438: Object doesn't support property or method 'module'
refernce-module.js, line 6 character 1
SCRIPT5007: Unable to get value of the property 'controller': object is null or undefined
refernce-module-controller.js, line 6 character 1

I want to mention that I havent used any angular JS in html except for ng-app(in html tag) and ng-controller (in bodytag).

Following is the controller js code :

referenceDataMaintainenceApp.controller('referenceDataMaintainenceCtrl', function ($scope) {

$scope.lookup_codes = [
    {'key':'FS_ASSET_CLASS','value':'ASSET CLASS - FS'},
    {'key':'account_actc','value':'Non ASSET CLASS - FS'},
    {'key':'account_fee_type_cd','value':'Account Fee Types'}
];




$scope.change_lookup = function() {
   // console.log(new Date('2014-05-02').getTime());
    var key = $scope.lookup_codes_model.key;
    if(key == 'FS_ASSET_CLASS') {
        $scope.lookup_codes_details = [{'name':'ASSET CLASS','description':'Testing the code lookup module for ASSET CLASS.', 'active':true}];
    } else {
        $scope.lookup_codes_details = [];
    }
};


$scope.addLookupCode = function() {

    $scope.lookup_codes_details.push($scope.new_lookup_code);
    $scope.new_lookup_code = getLookupCodeObject();


};

/*----------------------benchmark-----------------------------*/      

$scope.benchmarks_details = [{'name':'Bench 1','description':'BenchMark 1', isNew : false},
                             {'name':'Bench 2','description':'BenchMark 2', isNew : false}];

$scope.addBenchMark = function() {

    $scope.benchmarks_details.push($scope.new_benchmark);
    $scope.new_benchmark = getBenchMarkObject();

  };




  /*----------------------holidays-----------------------------*/    

$scope.calendar_countries = [
                            {'key':'AUST','value':'AUSTRALIA'},
                            {'key':'CANADA','value':'CANADA'},
                            {'key':'CHINUK','value':'CHINA UK'}
                           ];
$scope.calendar_years = [
                            {'key':'2012','value':'2012'},
                            {'key':'2013','value':'2013'},
                            {'key':'2014','value':'2014'}
                        ];

$scope.change_holiday = function() {
    var calendar = $scope.calendar_countries_model;
    var year     = $scope.calendar_years_model;
    if(angular.isUndefined(calendar) || 
            angular.isUndefined(year))
        return;
    else {
        if(calendar.key == 'AUST' && 
                year.key == '2014') {
            $scope.calendar_details = [{'date':'1388620800000','description':'New Year', isdelete : false},
                                         {'date':'1398988800000','description':'May Day', isdelete : false}];
        }
        else {
            $scope.calendar_details = [];
        }
    }
    //console.log($scope.calendar_years_model);

};


$scope.addHoliday = function() {

    $scope.calendar_details.push($scope.new_holiday);
    $scope.new_holiday = getHolidayObject();


};


/*----------------------User Defined PAM Fields-----------------------------*/    

$scope.data_types = [
                            {'key':'date','value':'Date'},
                            {'key':'float','value':'Float'},
                            {'key':'int','value':'Integer'}
                           ];
$scope.pam_screens = [
                            {'key':'account_select','value':'Account Details'},
                            {'key':'fund_select','value':'Fund Detail'}
                      ];

$scope.pams_fields = [{'name':'Benchmark Tolerance','label':'Benchmark Tolerance', 'type':'Date', 'screen': 'fund_select','active':true}];

$scope.addUsedDefPAMFields = function() {

    $scope.pams_fields.push($scope.new_pam_field);
    $scope.new_pam_field = getUserDefinedPamFieldsObject();


};

/*----------------------Broker Code Maintainence-----------------------------*/    


$scope.brokers_details = [{'name':'000200','description':'GREENWICH OPTIONS COMPANY', 'active':true},
                          {'name':'000202','description':'WEISS PECK AND GREER LLC', 'active':false}];

$scope.addBrokerCodes = function() {

    $scope.brokers_details.push($scope.new_brokers_detail_list);
    $scope.new_brokers_detail_list = getBrokerCodeObject();


}; 


});

function getLookupCodeObject () {

lookup_code = {
        name :  '', 
        description : '',
        active : false
};

return lookup_code;
}

function getBenchMarkObject () {

benchmark = {
        name :  '', 
        description : '',
        isNew : false
};

return benchmark;
}

function getHolidayObject () {

holiday = {
        date :  '', 
        description : '',
        isdelete : false
};

return holiday;
}

function getUserDefinedPamFieldsObject () {

pam_fields = {
        name :  '', 
        label : '',
        type : '',
        sceen : '',
        active : false
};
return pam_fields;
}

function getBrokerCodeObject () {

broker_code = {
        name :  '', 
        description : '',
        active : false
};
return broker_code;
}

and following is the module js code :

var referenceDataMaintainenceApp = angular.module('referenceDataMaintainenceApp', [] );

Kindly direct me to fix this browser issue.

Thanks

you should try using a version 1.2.x,m because since version 1.3 IE8 is not supported anymore so it may have some consequencies for IE9, docs.angularjs.org/guide/ie — sam
– sam, Commented Dec 16, 2014 at 10:14
could you also try to run your code in a jsfiddle in IE9, and give us a link if it still fails ? or a simpler version ? — sam
– sam, Commented Dec 16, 2014 at 10:16

Community · Accepted Answer · 2017-05-23 10:28:11Z

1

It would be helpful to see the HTML code of where you are including angular.js, refernce-module.js and refernce-module-conroller.js. Because out of the error messages I guess that the angular keyword is not recognized properly and therefore .module, the referenceDataMaintainenceApp assignment and the .controller wont work.

Maybe this this thread may help.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Dec 16, 2014 at 10:42

Manuel B.

1157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Koustuv Sinha · Accepted Answer · 2014-12-16 11:20:08Z

-1

It seems like some of ECMA5 functionalities are not working in IE9. I have been porting AngularJS apps in IE8 to test its compatibility, and you can also try the following tips which helped me out :

ES5 Shim and ES5 Sham (needed for Object.Create polyfill)
JSON3 polyfill for JSON handling
Use Angular 1.2.x, which works seamlessly till IE8
Use jQuery 1.x.x
Always include jQuery before AngularJS, as Angular has own jQueryLite which it tends to use, which may cause an error in old browsers

Hope it helps!

answered Dec 16, 2014 at 11:20

Koustuv Sinha

1,68019 silver badges34 bronze badges

Comments

otavio.leitao · Accepted Answer · 2015-03-26 00:37:43Z

-1

This problem occurs because some parts of the AngularJS code are not originally compatible with IE9. I had the same problem and all you need to do is to import es5-shim in your app before AngularJS, as following:

<!--[if lte IE 9]>
    <script src="lib/es5-shim/es5-shim.min.js"></script>
    <script src="lib/es5-shim/es5-sham.min.js"></script>
<![endif]-->
<script src="lib/angular/angular.min.js"></script>

answered Mar 26, 2015 at 0:37

otavio.leitao

403 bronze badges

Collectives™ on Stack Overflow

Angular JS not working on IE9

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related