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上，我想這是目前最好的做法。