Blank page with Angular (v14) app in Safari

Question

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. eg 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 eg 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:

• Angular 9 Project is not working in production environment
• Blank page running Angular 9 app on ios 13

Answer 1

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.