Ionic 7+Angular：除錯 R3InjectorError(Platform: core)

​最近在研究做 APP 的方法，以 web 前端開發者的身分來說，第一優先會先選擇能用 HTML 和 JS 的框架出發。以下紀錄我使用 Ionic Angular 的使用紀錄：

▍ 錯誤描述

在以下環境下，可能發生 R3InjectorError(Platform: core) 報錯

@ionic/cli: 7.2.0
@angular/cli: 19.0.6

完整錯誤訊息如果是經由 Android Studio CatLog 查看，大概會是這樣：

NullInjectorError: R3InjectorError(Platform: core)[t -> Ir]
NullInjectorError: No provider for Ir!

不過在網路上查過後發現

1. R3InjectorError(Platform: core)[t -> lr]中的lr在每個人的訊息都不一樣，有些人可能是Xr、Os 等。 ​
2. 問題不一定在開發環境或生產環境發生。
3. Ionic 8 + Angular 19 也可能發生相同問題（link）。

▍ 解法

【解法一】Angular 降版至 18：成功

在 Ionic 論壇的討論結果是「降版 Angular 至 18」XD 雖然還有其他解法，但這似乎是討論者們支持最穩定的方法。可能 Angular 19 還太新了，Ionic 7 是 2023 年推出的，沒有完整支持。

在將 package.json 中的 Angular 19 改成 18.2.12 版本後，再安裝相對應的 TS 和 zone 就可以了。

npm install typescript@5.5.4 --legacy-peer-deps
npm install zone.js@0.14.10 --legacy-peer-deps

不論是 Android Studio 測試，或做成 PWA 發佈到 firebase 網頁上查看都沒有問題。

解法來源：https://forum.ionicframework.com/search?q=R3InjectorError(Platform%3A%20core)

【解法二】註解 Angular 優化功能：失敗

開啟 angular.json 檔案，將以下屬性設為 false。但我查看了自己的設定，預設已經是 false，這對我來說沒有用。

"development": {
            "optimization": false, // 編譯過程中的優化功能
            "buildOptimizer": false // Angular 特定的構建優化器
            },

解法來源：

• https://stackoverflow.com/a/78461745
• https://forum.ionicframework.com/t/how-to-trace-nullinjectorerror-which-appears-in-production-environment-only/245480/11

【解法三】註解 Angular 優化功能：失敗

註解common.js中關於 JavaScript 文件的壓縮優化的程式碼。雖然這在 Android Studio APP CatLog 中沒有再報錯，但佈署到 firebase 時還是錯誤 QQ。

// node_modules\@angular-devkit\build-angular\src\tools\webpack\configs\common.js
if (scriptsOptimization) {
        extraMinimizers.push(new plugins_1.JavaScriptOptimizerPlugin({
            ...
            advanced: buildOptions.buildOptimizer,
        }));
    }

解法來源：https://stackoverflow.com/a/78676522

Ann Chou 喜愛電影和威士忌，既是前端工程師，也是藝術愛好者。喜歡書寫學習歷程和技術文件，掌握經驗與隨時提取的感覺很好。