Safari 中带有 Angular (v14) 应用程序的空白页面

Question

“问题”

我有一个非常复杂的 Angular 应用程序（当前为 v14），我有惰性模块、Angular i18n 和

msal-angular

集成。

我的

main.ts

引导程序也不同于“简单”的 Angular 应用程序。 例如引导程序：

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 和 Firefox 中运行良好（好吧，好吧，有时这并不意味着什么） 。 其次，当然，我在没有该异常中提到的代码的情况下尝试了整个过程。结果，异常消失了，但页面仍然是空白。因此，我再次检查 DevTools，发现另一个不同的错误...类似的错误，再次找不到某些内容。好的...修复了一个，然后再次，与其他东西相同...这种情况一直持续下去。

现在，这种行为最好也是最丑陋的是： 当我在并行打开 DevTools 的情况下加载应用程序时，该应用程序可以正常运行，没有任何问题 - 正如预期的那样，与 Chrome 和 Firefox 中的方式相同。 🎉 别开玩笑了！

现在你可以说，好吧，那么我们的操作系统、Mac、Safari 等等都有问题……嗯，是的，也许，我不知道。但是，我在不同的设备和其他“客户端”上遇到同样的问题......

什么？有什么想法吗？

我已经尝试过非常绝望的事情，比如用

display: grid

替换所有

display: flex

，因为我听说在极少数情况下 Safari 上的网格会出现问题。我开始从应用程序中删除越来越多的代码，但尚未成功。 （我会继续，这是我最好的机会......）

---

顺便说一句。我在这里发现了“类似”的问题，但还没有解决方案：

• Angular 9 项目无法在生产环境中运行
• 在 ios 13 上运行 Angular 9 应用程序的空白页面

Answer 1

解决方案是

tsconfig.json

...

我从头开始重新创建了整个项目，并逐步添加了我拥有的所有奇特的东西......在某些时候我遇到了同样的问题，我最后的更改是什么？ ... 或多或少是在

tsconfig.json

我有

esnext

（对于

target

中的

module

和

compilerOptions

设置）但是，这会破坏 Safari 的描述（顺便说一句，还有 Firefox、iPad 上的 Chrome）。无论如何，我正在使用

es2020

，这是目前的最佳实践。

Answer 2

这是 Safari 版本的已知错误< 16. You can read more about it 此处。虽然您的用户可以升级到 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