问题
我有一个非常复杂的Angular应用程序(目前v14)，我有懒惰模块，Angular i18n &msal-angular整合。
我在main.ts中的引导也不同于一个"简单"的引导。角的应用。如引导:
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中运行良好。火狐(好吧，好吧，有时候这并不意味着什么)。其次，当然，我尝试了不使用异常中提到的代码的整个过程。结果，异常消失了，但页面仍然是空白的。所以，我再次检查DevTools，有另一个不同的错误…一个类似的，还是找不到什么。好吧……固定一个，然后再一次，同样的事情与其他的东西…这样没完没了。
现在，这个行为最好也是最丑陋的地方是:当我加载应用程序与DevTools并行打开，应用程序的工作没有任何问题-正如预期的一样，在Chrome & quot;Firefox。🎉不开玩笑!
现在你可能会说，好吧，那么我们的操作系统，Mac, Safari，等等都有问题。好吧，也许吧，我不知道。但是，我在不同的设备和其他"客户端"上也有同样的问题……
Wtf ?任何想法?
我已经尝试了非常绝望的事情，比如用display: flex替换所有的display: grid，因为我听说在一些罕见的情况下，Safari上的网格有问题。我开始从应用程序中删除越来越多的代码，但还没有成功。(我将继续，这是我最好的机会…)
顺便说一句。我发现"相似"。这里有问题但没有解决方案:
- Angular 9项目不能在生产环境中工作
- 在ios 13上运行Angular 9应用的空白页面
解决方案是tsconfig.json…
我从头开始重新创建了整个项目&一步一步地添加我所有的花哨的东西……在某种程度上，我也有同样的问题& &;我最后一次改变是什么?…或多或少在tsconfig.json
我有esnext(target&module设置在compilerOptions)BUT，这破坏了Safari(顺便说一句)。iPad还火狐,Chrome)。我在es2020上，这是目前最好的做法，我想无论如何。