Introduction
This snippet can be used while working with AngularJS on Internet Explorer.
Background
While I was working with AngularJS for the first time, I had an issue with Internet Explorer. My code used to work on Firefox, but I was having trouble working with it on Internet Explorer. So, I thought of sharing this simple solution.
Using the Code
Below is a sample View (.cshtml) of the application.
<!DOCTYPE html>
<html>
<head>
<script src="/angular.min.js" type="text/javascript"></script>
<script src="/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
var app = angular.module("MyApp", [])
app.controller('MyCtrl', function ($scope) {
$scope.YourFunction= function () {
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyCtrl">
</div>
</body>
</html>
My page used to work fine in Firefox, but I was facing problems with the Internet Explorer browser.
It threw many errors like below:
SCRIPT5009: 'Node' is undefined
File: angular.min.js, Line: 184, Column: 339
SCRIPT438: Object doesnt support property or method 'addEventListener'
File: jquery-3.1.1.min.js, Line: 6, Column: 123
To solve the error, you just need to add the below line to your <head></head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge, width=device-width, initial-scale=1" />
This worked for me in Internet Explorer.
Add your solution if anyone has any other solution.
Thanks!
