Difficulty loading AngularJS 1.3 page on Internet Explorer 8

Question

Difficulty loading AngularJS 1.3 page on Internet Explorer 8

Being an avid user of Angular, it pains me to even bring up the topic of IE8, a browser that many consider to be pure evil and deserving of extinction.

Despite my reservations, I am experiencing difficulties with loading Angular 1.3 in IE8. The page breaks before fully loading and displays an error message: Object Expected related to an if condition utilizing the isArray() function. Strangely enough, this function works fine in Angular 1.2, adding to the confusion.

To provide some context, my company has recently decided to stop supporting IE8 for new projects. However, we still need our new UI to function on IE8 for the initial landing page so users can access our older software. My hope was to implement Angular 1.3 and make minor adjustments for IE8 compatibility until it is no longer required.

With all that said, my main query is whether it's feasible to use Angular 1.3 with IE8 or if sticking to version 1.2 is the only option until IE8 support is completely phased out.

javascript angularjs internet-explorer-8

Answer 1

Answer №1

If you want your Angular app to run smoothly, you'll need to include some additional code before loading angular itself. This collection of shims/polyfills is sourced mostly from Mozilla Developer Network with some contributions by myself.

Keep in mind that this setup only enables AngularJS to function and does not update the JavaScript runtime of IE8. That means certain methods like somePromise.catch(...) won't work, and you'll have to use somePromise["catch"](...) instead.

// Various polyfills to support older browsers
...

Additionally, if you are using angular-bootstrap, you'll need to make a small modification to the angular.min.js file due to compatibility issues arising from the usage of the reserved keyword in.

Replace:

var e=(b?"s":'((l&&l.hasOwnProperty("'+a+'"))?l:s)')+"."+a;

With:

var e=(b?"s":'((l&&l.hasOwnProperty("'+a+'"))?l:s)')+"['"+a+"']";

Answer 2

If you want your Angular app to run smoothly, you'll need to include some additional code before loading angular itself. This collection of shims/polyfills is sourced mostly from Mozilla Developer Network with some contributions by myself.

Keep in mind that this setup only enables AngularJS to function and does not update the JavaScript runtime of IE8. That means certain methods like somePromise.catch(...) won't work, and you'll have to use somePromise["catch"](...) instead.

// Various polyfills to support older browsers
...

Additionally, if you are using angular-bootstrap, you'll need to make a small modification to the angular.min.js file due to compatibility issues arising from the usage of the reserved keyword in.

Replace:

var e=(b?"s":'((l&&l.hasOwnProperty("'+a+'"))?l:s)')+"."+a;

With:

var e=(b?"s":'((l&&l.hasOwnProperty("'+a+'"))?l:s)')+"['"+a+"']";

Answer 3

Answer №2

Based on the feedback provided in the comments and Zenorbi's response, it has become apparent that Angular 1.3 no longer functions correctly in IE8. This is not surprising given that Angular 1.3 was never intended to be compatible with IE8 from the start.

Fortunately, I have devised a simple workaround to slightly slow down page loading times for IE8 users, which is an acceptable compromise for me.

With the following code snippet, I am able to default to loading Angular 1.3 initially, but if any IE8 users access the page, it will subsequently load angular 1.2, effectively replacing any duplicated code:

<script type="text/javascript" src="target/libraries/angular.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="target/libraries/angular-1.2.min.js"></script>
<![endif]-->
<script type="text/javascript" src="target/libraries/angular-route.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="target/libraries/angular-route-1.2.min.js"></script>
<![endif]-->

Note: While this approach may not be ideal practice in general, if there was a greater emphasis on supporting IE8 users, I would opt for Zenorbi's solution as it enables the loading of only one version of Angular.

Answer 4

Based on the feedback provided in the comments and Zenorbi's response, it has become apparent that Angular 1.3 no longer functions correctly in IE8. This is not surprising given that Angular 1.3 was never intended to be compatible with IE8 from the start.

Fortunately, I have devised a simple workaround to slightly slow down page loading times for IE8 users, which is an acceptable compromise for me.

With the following code snippet, I am able to default to loading Angular 1.3 initially, but if any IE8 users access the page, it will subsequently load angular 1.2, effectively replacing any duplicated code:

<script type="text/javascript" src="target/libraries/angular.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="target/libraries/angular-1.2.min.js"></script>
<![endif]-->
<script type="text/javascript" src="target/libraries/angular-route.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="target/libraries/angular-route-1.2.min.js"></script>
<![endif]-->

Note: While this approach may not be ideal practice in general, if there was a greater emphasis on supporting IE8 users, I would opt for Zenorbi's solution as it enables the loading of only one version of Angular.

Answer 5

Answer №3

After reviewing responses from SamHuckaby and Zenorbi, I have devised a viable solution that combines their suggestions with insights gleaned from an article titled IF Internet Explorer THEN Do Something Else (A How To...) by Phil Nash:

     <!--[if !IE]>-->
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular.js"></script>
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular-route.js"></script>
    <!--<![endif]-->

    <!--[if gt IE 8]>
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular.js"></script>
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular-route.js"></script>
    <![endif]-->

    <!--[if lt IE 9]>
        <script type="text/javascript" src="/ui/resources/lib/angularjs/1.2.28/angular.js"></script>
        <script type="text/javascript" src="/ui/resources/lib/angularjs/1.2.28/angular-route.js"></script>
    <![endif]-->

        <script type="text/javascript" src="webjars/es5-shim/4.0.6/es5-shim.js"></script>
        <script type="text/javascript" src="webjars/es6-shim/0.20.2/es6-shim.js"></script>

<!--[if !IE]>-->...<!--<![endif]-->

- This conditional comment is assessed by IE, but the scripts within are not loaded by IE and will be loaded by all other browsers.

<!--[if gt IE 8]>...<![endif]-->

- This conditional comment is checked by IE, and if greater than IE 8, the scripts will be loaded.

<!--[if lt IE 9]>...<![endif]-->

- This conditional comment is evaluated by IE, and if less than IE 9, the scripts will be loaded.

The inclusion of both es5-shim and es6-shim outside of the IE8 conditional block ensures that they are accessible to all browsers (and this operation does not significantly impact performance), following the discovery of issues in Safari related to String.prototype.startsWith().

While there is some code duplication within the first and second conditional comments (which cannot be avoided), we successfully prevent any unnecessary script loading and achieve our objective effectively.

Answer 6

After reviewing responses from SamHuckaby and Zenorbi, I have devised a viable solution that combines their suggestions with insights gleaned from an article titled IF Internet Explorer THEN Do Something Else (A How To...) by Phil Nash:

     <!--[if !IE]>-->
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular.js"></script>
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular-route.js"></script>
    <!--<![endif]-->

    <!--[if gt IE 8]>
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular.js"></script>
        <script src="/ui/resources/webjars/angularjs/1.4.0/angular-route.js"></script>
    <![endif]-->

    <!--[if lt IE 9]>
        <script type="text/javascript" src="/ui/resources/lib/angularjs/1.2.28/angular.js"></script>
        <script type="text/javascript" src="/ui/resources/lib/angularjs/1.2.28/angular-route.js"></script>
    <![endif]-->

        <script type="text/javascript" src="webjars/es5-shim/4.0.6/es5-shim.js"></script>
        <script type="text/javascript" src="webjars/es6-shim/0.20.2/es6-shim.js"></script>

<!--[if !IE]>-->...<!--<![endif]-->

- This conditional comment is assessed by IE, but the scripts within are not loaded by IE and will be loaded by all other browsers.

<!--[if gt IE 8]>...<![endif]-->

- This conditional comment is checked by IE, and if greater than IE 8, the scripts will be loaded.

<!--[if lt IE 9]>...<![endif]-->

- This conditional comment is evaluated by IE, and if less than IE 9, the scripts will be loaded.

The inclusion of both es5-shim and es6-shim outside of the IE8 conditional block ensures that they are accessible to all browsers (and this operation does not significantly impact performance), following the discovery of issues in Safari related to String.prototype.startsWith().

While there is some code duplication within the first and second conditional comments (which cannot be avoided), we successfully prevent any unnecessary script loading and achieve our objective effectively.

Answer 7

Answer №4

According to the migration documentation in the Angular Developer Guide:

Important update: AngularJS 1.3 no longer supports IE8. More information can be found on our blog. While AngularJS 1.2 will still provide support for IE8, the development team will not prioritize fixing issues specific to IE8 or earlier versions.

Answer 8

According to the migration documentation in the Angular Developer Guide:

Important update: AngularJS 1.3 no longer supports IE8. More information can be found on our blog. While AngularJS 1.2 will still provide support for IE8, the development team will not prioritize fixing issues specific to IE8 or earlier versions.

Answer 9

Answer №5

One of the contributors on Github, known as @fergaldoyle, oversees a repository dedicated to integrating shim and polyfill techniques along with other patch strategies for ensuring compatibility.

Implementing such an approach might prove beneficial for numerous providers offering solutions in various fields.

Answer 10

One of the contributors on Github, known as @fergaldoyle, oversees a repository dedicated to integrating shim and polyfill techniques along with other patch strategies for ensuring compatibility.

Implementing such an approach might prove beneficial for numerous providers offering solutions in various fields.

Answer 11

Answer №6

After trying L0lander's solution, which was initially my top choice, I ran into issues with older versions of Angular causing conflicts with other scripts. Ultimately, the solution didn't work as expected. Upon reviewing the statistics on my website, I discovered that only 0.2% of users were still using IE8 or earlier. I decided not to stress over such a small percentage of visitors and simply added a message prompting users of IE8 or below to consider upgrading.

To implement this, insert the following code immediately after the body tag on all your pages:

<!--[if lt IE 9]>
    <div style="text-align: center; font-size: 22px; padding: 20px; background-color: #d14c4c; color: #f3e3e3;">Your Internet Explorer version is outdated for proper functionality of this site.<br>Please <a href="https://www.google.com/search?q=update+internet+explorer" target="_blank" style="text-decoration: underline; color: #76c880">click here</a> to upgrade to a newer version.</div>
<![endif]-->

Answer 12

After trying L0lander's solution, which was initially my top choice, I ran into issues with older versions of Angular causing conflicts with other scripts. Ultimately, the solution didn't work as expected. Upon reviewing the statistics on my website, I discovered that only 0.2% of users were still using IE8 or earlier. I decided not to stress over such a small percentage of visitors and simply added a message prompting users of IE8 or below to consider upgrading.

To implement this, insert the following code immediately after the body tag on all your pages:

<!--[if lt IE 9]>
    <div style="text-align: center; font-size: 22px; padding: 20px; background-color: #d14c4c; color: #f3e3e3;">Your Internet Explorer version is outdated for proper functionality of this site.<br>Please <a href="https://www.google.com/search?q=update+internet+explorer" target="_blank" style="text-decoration: underline; color: #76c880">click here</a> to upgrade to a newer version.</div>
<![endif]-->

Difficulty loading AngularJS 1.3 page on Internet Explorer 8

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is it possible to view the list of errors displayed by vscode when opening a JS file exclusively through the terminal?

Utilizing conditional statements within the array.forEach method to select specific sub-objects within an array of objects

Tips for uploading images in Next.js using Firebase

What is the maximum duration we can set for the Ajax timeout?

Using JavaScript to automate keystrokes programmatically

Facing issues using Angular 5 for PUT requests due to 401 errors

Building better interfaces with Next.js, Styleguidist, and Fela for React applications

Is it possible to utilize Angular validation directives programmatically within a personalized directive?

A static method written in Typescript within an abstract class for generating a new instance of the class itself

Conceal an item if it is located past a certain point (from the viewpoint of the camera)

Using Facebook authentication in React Native

Is there a way to efficiently remove deleted files from my Google Drive using a customized script?

Challenge with Filter Functionality when Activating Button

Unlocking the potential of Arrays in Javascript: strategies for extracting maximum value

A warning has been issued: CommonsChunkPlugin will now only accept one argument

Navigation bar options across various web pages

Measuring Page Loading Status using Ajax

Can a before hook ever run after a test in any situation, Mocha?

The data in the viewmodel remarkably aligns with the data stored in $sessionStorage

Discover the nodes with the highest connections in a D3 Force Graph