3

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?

dave0688
  • 5,372
  • 7
  • 33
  • 64
  • 1
    check .browserslistrc and make sure your browser supported from there – Mohammad Reza Mrg Aug 03 '22 at 17:18
  • does this error throw in development too? – Mojtaba Nejad Poor Esmaeili Aug 03 '22 at 17:30
  • Unfortunately I cannot check locally (on the phone). But in the deployed version it alleys happens. – dave0688 Aug 03 '22 at 21:08
  • browserslist is a very good hint, I’ll check that. Thanks! – dave0688 Aug 03 '22 at 21:09
  • Unfortunately it's not the browserslist. I have the same version (103) as on my PC... Any other hints? – dave0688 Aug 04 '22 at 13:45
  • I know that some libraries do not work if minified. It is the case for node-mysql for example. I do not say it is it, but you could try disabling different optimization and see which one is the one that breaks it. – Akxe Aug 07 '22 at 11:17
  • Hm, between my working, and my non-working state I just added two libraries: `@angular/cdk` and `parse` (some peer dependency). I'm currently setting up localhost on the iPhone to be able to debug better (it's not that easy though :D). Then I'll try to remove those libs and see if that works. – dave0688 Aug 07 '22 at 11:26
  • I think you should be able to open Developer Tools on Chrome for Windows, and enable mobile mode to replicate it. Can you try that too and tell us the result? Or you could also try the [following](https://stackoverflow.com/questions/37256331/is-it-possible-to-open-developer-tools-console-in-chrome-on-android-phone) and see if there's something in the console... – Pieterjan Aug 07 '22 at 11:54
  • Yes, this I did, and on Desktop the app is working perfectly. It's really only on browsers on the phone. I also managed to debug on the phone (by using Safari, and then on the Macbook you can get its console - but also there, no error. – dave0688 Aug 07 '22 at 14:15

1 Answers1

0

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.

dave0688
  • 5,372
  • 7
  • 33
  • 64