Why is my angular 10 default app won't show on IOS 9.3.5?

Question

I usually test my apps on my Ipad 2 that runs on IOS 9.3.5 also I'm using angular 10. I've just created a new app and when running it I get blank page on Safari and Chrome(I think they use the same webkit)

Looking at the console of Safari it says absolutely nothing. I went through other types of similar questions on SObut can't find the solutions

the only thing I can say is that the basic html loads normally but with nothing inside <app-root>.

By the way the app is working just well on a recent Android phone.

Should I activate more polyfills?

Answer 1

So I've updated to angular 10 As mentioned by @cjd82187 Angular doesn't take care natively old support based on es5 everything is now esm2015 so in order to make it work on my old Ipad I needed to add in my ts.config.base.json

"compilerOptions": {
     ...,
     target: 'es5',
     ...
}

I also added safari 9inside my browserlistrc file.

Answer 2

Per the Angular docs, they only support the latest two major IOS Versions, which would be 13 and 12.

https://angular.io/guide/browser-support

If you have a Mac, you can try and debug in Safari, so you can see if there are any errors in the console to debug a little more.

1. From Safari on the Mac, go to Preferences > Advanced and you should see a checkbox at the bottom for "Show Develop menu in menu bar".
2. Connect your iphone via a cable to your computer
3. Open your site
4. Open Safari, look in the new develop bar, and you should see your phone listed

You should be able to debug your site from there.

Answer 3

To whomever reads this after, a correction to JSmith's "solution". You gotta add the browser version you want to support to the browserslist file, but there is no need to change the target to es5 in tsconfig.json. In doing so, you will deactivate differential loading and lose its benefits.