Angular App: Blank screen on mobile browsers

Issue

I have a very weird error with my Angular 14 App: Whenever I open it In mobile browsers (Chrome, Safari, Firefox) I see only a blank screen. I’ve checked the console (with chrome://inspect) and there’s no error in the console. Also, on Browsers (non mobile) it works perfectly. The only error I’m seeing in the console is “exports is not defined”, but still it works perfectly.

I have no polyfills activated, but that should be no problem, since it’s only for downwards compatibility (or am I wrong?)

Does anybody have an idea?

Solution

Ok, in case someone has the same problem (and yes, it took me a lot of time to find that out):

In my case it was, because mobile browsers cannot parse specific elements of a regex. I was using lookahead and lookbehind expressions (Regex lookahead, lookbehind and atomic groups), which apparently cannot be resolved by mobile browsers. Removing them made the app work perfectly on mobile browsers again.

That was a tough one :)

TL;DR;

How I found it: I checked all browsers, and found out, that on Safari (on Desktop) the app is also not working. And Safari was the only browser which threw some error. In my case it was:

SyntaxError: Invalid regular expression: invalid group specifier name

That was the hint I needed, which pointed me to my regex.

Answered By - dave0688