CODEWITHSUNDEEP
angularsafari
gestj
gestj

Reputation: 256

Blank page with Angular (v14) app in Safari

The "problem"

I have a pretty complex Angular app (currently v14), I have lazy modules, Angular i18n & msal-angular integrated.

Also my bootstrap in main.ts differs from a "simple" Angular app. e.g. bootstrap:

fetch('/assets/settings.json')
    .then(response => response.json())
    .then(settings => {
        googleTagManager();
        platformBrowserDynamic([
            { provide: ENVIRONMENT, useValue: environment },
            { provide: SETTINGS, useValue: settings },
            ...
            {
                provide: MSAL_INSTANCE,
                useFactory: MsalInstanceFactory,
                deps: [REDIRECT_URI, LOCALE_URI_PREFIX, SETTINGS],
            },
            {
                provide: MSAL_GUARD_CONFIG,
                useFactory: MsalGuardConfigFactory,
            },
            {
                provide: MSAL_INTERCEPTOR_CONFIG,
                useFactory: MsalInterceptorConfigFactory,
                deps: [SETTINGS],
            },
        ])
            .bootstrapModule(RootModule)
            .catch((err) => console.error(err));
    })
    .catch(err => logger.error('Couldn\'t load \'/assets/settings.json\'', err));

In Chrome, Firefox the app works as expected.

But, when I load the app in Safari either in deployed or locally served mode I just have a blank screen. That is because while bootstrapping, the compiled JavaScript stops fairly early.

What I can see afterwards in DevTools, is e.g. this exception:

ReferenceError: Can't find variable: _angular_forms__WEBPACK_IMPORTED_MODULE_2__
(anonymous function) — number-format.directive.ts:25
(anonymous function) — number-format.directive.ts:31
__webpack_require__ — bootstrap:19
...

Now you might say, well, just fix that error. It obviously can't find something there... Well... yeah... First of all, as I said, the same code just runs fine in Chrome & Firefox (ok, fine, sometimes that doesn't mean anything). Second, of course, I tried the whole thing without the code mentioned in that exception. As a result, the exception is gone, but the page is still blank. So, I check out DevTools again and there is another different error... A similar one, again it can't find something. Okay... fixed one, and then again, same thing with something else... this goes on and on and on.

Now, the best and most ugly thing about this behaviour is: When I load the app with DevTools opened in parallel, the app works without any problems - just as expected the same way as in Chrome & Firefox. 🎉 No kidding!

Now you could say, okay, then there is something wrong with our OS, Mac, Safari, what ever... Well, yeah, maybe, I don't know. But, I have the same problem on different devices and other "clients"...

Wtf? Any idea?

I tried already really desperate things like replacing all display: grid with display: flex because I heard in some rare cases there is a problem with grid on Safari. I started to remove more and more code from the app but without success yet. (I'll continue on that, its my best chance…)

Btw. I found "similar" questions but no solutions (yet) here:

Upvotes: 2

Views: 3831

Answers (2)

Alex
Alex

Reputation: 3839

This is a known bug for Safari versions < 16. You can read more about it here. While your users can upgrade to 16 or above to avoid the issue, that might not always be an option. For those cases, you can update your .browserslistrc file to support the correct version of Safari. At the time of writing this, here is what my file looked like to fix the problem:

last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 3 Safari major versions
last 2 iOS major versions
Firefox ESR

Upvotes: 0

gestj
gestj

Reputation: 256

The solution was tsconfig.json ...

I recreated the whole project from scratch & added step by step all the fancy stuff I have... at some point I had the same problem & what was my last change? ... it was more or less in tsconfig.json

I had esnext (for the target & module settings in compilerOptions) BUT, this breaks Safari as described (btw. also Firefox, Chrome on iPad). I am on es2020 which is best practise currently I guess anyway.

Upvotes: 4

Related Questions