Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Angular based pages not loading on IE.

Sachindey11
Level 2
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
BrianKasingli
Correct answer by
Community Advisor
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
BrianKasingli
Correct answer by
Community Advisor
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

Sachindey11
Level 2
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',.....
BrianKasingli
Community Advisor
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
Sachindey11
Level 2
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"
]