Safari中带有Angular（V14）应用的空白页

Question

“问题”

我有一个相当复杂的角度应用程序（目前V14），我有懒惰的模块，Angular I18n＆amp; MSAL-GANGULAR集成。

同样，我的bootstrap在main.ts中与“简单” Angular App不同。 例如引导程序：

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));

在Chrome中，Firefox该应用程序按预期工作。

但是，当我以部署或本地服务模式将应用程序加载到Safari中时，我只有一个空白屏幕。那是因为在引导时，编译的JavaScript停止了很早。

我之后在DevTools中看到的是此例外：

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

现在您可能会说，只需解决该错误即可。显然，它在那里找不到东西...好吧...是的...首先，正如我所说，相同的代码在Chrome＆amp; Firefox（好的，好，有时这并不意味着什么）。 其次，当然，我尝试了整个事情，没有该例外中提到的代码。结果，例外消失了，但是页面仍然空白。因此，我再次查看DevTools，还有另一个不同的错误...一个类似的错误，又找不到东西。好的...修复了一个，然后再修复了其他事情……这不断地进行。

现在，关于这种行为最好，最丑陋的事情是： 当我使用并行打开的DevTool加载该应用程序时，该应用程序毫无问题 - 与Chrome＆amp; Firefox。

Answer 1

解决方案是tsconfig.json ...

我从头开始重新创建了整个项目。一步一步地添加了我拥有的所有花哨的东西...在某个时候我也有同样的问题＆amp;我的最后一个更改是什么？ ... tsconfig.json

我有esnext（对于target＆amp; module） 编译中的设置）但，这打破了如所述的野生动物园（顺便说一句，也是iPad上的Firefox，Chrome）。我在es2020上，这是目前我想的最佳实践。

Answer 2

这是Safari版本的已知错误＆lt; 16。您可以阅读有关它的更多信息在这里。尽管您的用户可以升级到16或更高，以避免问题，但这可能并非总是一个选择。对于这些情况，您可以更新.browserslistrc文件以支持Safari的正确版本。在撰写本文时，这是我的文件看起来像是解决问题：

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