Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Angular based pages not loading on IE.

Avatar

Level 2

Hi All,

We have Angular based pages on our site. However those are not loading on IE9-11.

 

ERROR Error: Uncaught (in promise): ReferenceError: 'fetch' is undefined

ReferenceError: 'fetch' is undefined

 

Has anyone faced this ?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Sachindey11,

It looks like you are trying to test an older browser that does not support a modernise Web Browser API. Taking a look at the caniuse.com, it seems the fetch is not supported in IE11 and lower. This problem looks like a vanilla JavaScript issue, and not with the AngularJS framework.

If you wish to get fetch to work on IE11 and lower, you can check out the fetch polyfill library, https://github.com/github/fetch, or simply use a modernised JavaScript library like axios; however, axios only supports IE11.

Also, many companies stopped supporting IE 11 and lower because these are legacy browsers. You should definitely check with your product analyst or project manager to get a list of devices and browsers that you need to support.

BrianKasingli_0-1595366917931.png

To sum it up, Fetch is unsupported from IE 11 and lower, so this is the main reason why you are seeing such errors in the console.

Regards,

Brian

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

@Sachindey11,

It looks like you are trying to test an older browser that does not support a modernise Web Browser API. Taking a look at the caniuse.com, it seems the fetch is not supported in IE11 and lower. This problem looks like a vanilla JavaScript issue, and not with the AngularJS framework.

If you wish to get fetch to work on IE11 and lower, you can check out the fetch polyfill library, https://github.com/github/fetch, or simply use a modernised JavaScript library like axios; however, axios only supports IE11.

Also, many companies stopped supporting IE 11 and lower because these are legacy browsers. You should definitely check with your product analyst or project manager to get a list of devices and browsers that you need to support.

BrianKasingli_0-1595366917931.png

To sum it up, Fetch is unsupported from IE 11 and lower, so this is the main reason why you are seeing such errors in the console.

Regards,

Brian

Avatar

Level 2
Thanks for your reply brian. I have tried axios but that did not solve the issue..Angular app works fine on internet when running alone but when integrated with AEM i face the 'Fetch is undefined',.....

Avatar

Community Advisor
If you wish to support IE 11 and lower, then you must use the fetch polyfill JavaScript library https://github.com/github/fetch

Avatar

Level 2

I was able to resolve this in the below manner:

 

Polyfill.js(Added 2 libraries)

import 'custom-event-polyfill';
import 'whatwg-fetch';

 

Package.json(added this)

"browserslist": [
"defaults"
]