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

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

▍ 錯誤描述

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

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

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

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

不過在網路上查過後發現

R3InjectorError(Platform: core)[t -> lr] 中的 lr 在每個人的訊息都不一樣，有些人可能是 Xr、Os 等。
問題不一定在開發環境或生產環境發生。
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 就可以了。

1 2	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 特定的構建優化器
},

解法來源：

【解法三】註解 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

— 文章同步發佈於 Vocus