Ionic 7+Angular:除錯 NOT SUPPORTED: use "$id" for schema ID

Ionic 7+Angular:除錯 NOT SUPPORTED: use "$id" for schema ID

更新於 發佈於 閱讀時間約 3 分鐘

在尋找解法時發現其他情境也可能跳出相同錯誤,此文針對 Ionic Angular 在安裝 PWA 功能報錯的訊息解決。

▍ 錯誤描述

目前我的環境是以下版本,曾經安裝過最新的 angular/cli 19 又降版

@ionic/cli: 7.2.0
@angular/cli: 18.2.12

依照 Ionic Angular 官方文件安裝 PWA 的指示

ng add @angular/pwa

終端機會跳出請使用 "$id" 的提示

NOT SUPPORTED: keyword "id", use "$id" for shema ID
raw-image


▍ 解法

根據描述,使用搜尋 "id" 找到 /node_modules/@angular-devkit/schematics/collection-schema.json 文件,發現報出錯誤處已經使用 "$id",但仍然報出錯誤訊息。

回到錯誤訊息描述:

Found compatible package version: @angular/pwa@0.5.3

被搜尋到與當前 Angular 相容的版本 @angular/pwa@0.5.3!是距今 7 年前發布的版本。所以請看你目前使用的 Angular 版本,來調整 pwa 安裝版本。例如目前我使用的是 Angular 18.2.12,我的安裝指令則是:

npm i @angular/pwa@18.2.12

關於 @angular/pwa 版本可參考:https://www.npmjs.com/package/@angular/pwa?activeTab=versions

另外測試,如果沒經過降版,一開始就安裝最新的 Angular CLI(目前是 19),使用官方文件給的 ng add @angular/pwa 就真的會安裝 19 的 pwa 版本。

解法來源:https://stackoverflow.com/a/74882026



Ann Chou 喜愛電影和威士忌,既是前端工程師,也是藝術愛好者。喜歡書寫學習歷程和技術文件,掌握經驗與隨時提取的感覺很好。
avatar-img
Ann Chou的沙龍
16會員
28內容數
從藝術領域轉職到前端工程師,喜歡書寫學習歷程和技術文件,掌握經驗與隨時提取的感覺很好。
留言
avatar-img
留言分享你的想法!
Ann Chou的沙龍 的其他內容
這篇文章說明如何在 Windows 電腦上設定 Android 推播通知,包含使用 Expo 串接 Firebase 和 Azure 的步驟。文章涵蓋 Firebase 和 Azure 的設定,以及 Android Studio 和 JDK 的配置。
介紹在 React Native / Expo 中實作推播通知的方式,並比較使用 Expo Notifications 與整合 Firebase Cloud Messaging(FCM)或 Azure Notification Hubs 的差異。
本篇主題是 React Native 小介紹。 因為先前在測試 Ionic + PWA 開發,對相機功能實在太失望,結果現在我開始用 React Native / Expo 了。 如果還不清楚 Ionic 和 Reac Native 能做不同種類的 App,可以先閱讀 App 種類概述 。
這篇文章說明如何在 Windows 電腦上設定 Android 推播通知,包含使用 Expo 串接 Firebase 和 Azure 的步驟。文章涵蓋 Firebase 和 Azure 的設定,以及 Android Studio 和 JDK 的配置。
介紹在 React Native / Expo 中實作推播通知的方式,並比較使用 Expo Notifications 與整合 Firebase Cloud Messaging(FCM)或 Azure Notification Hubs 的差異。
本篇主題是 React Native 小介紹。 因為先前在測試 Ionic + PWA 開發,對相機功能實在太失望,結果現在我開始用 React Native / Expo 了。 如果還不清楚 Ionic 和 Reac Native 能做不同種類的 App,可以先閱讀 App 種類概述 。