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: flex替换所有display: grid ，因为我听说在极少数情况下 Safari 上的 grid 有问题。 我开始从应用程序中删除越来越多的代码，但还没有成功。 （我会继续，这是我最好的机会……）

---

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

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

Answer 1

解决方案是tsconfig.json ...

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

我有esnext （用于compilerOptions中的target和module设置）但是，这会破坏 Safari 的描述（顺便说一句。还有 Firefox，iPad 上的 Chrome）。 我在es2020上，我想这是目前最好的做法。