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
14會員
22內容數
從藝術領域轉職到前端工程師,喜歡書寫學習歷程和技術文件,掌握經驗與隨時提取的感覺很好。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Ann Chou的沙龍 的其他內容
​最近在研究做 APP 的方法,以 web 前端開發者的身分來說,第一優先會先選擇能用 HTML 和 JS 的框架出發。這篇文章是針對 Ionic Angular 發生 R3InjectorError(Platform: core) 的除錯紀錄。
從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
我依舊維持著修習 JS 的步伐,但我仍然覺得自己對 JS 的熟悉度不足。在 JS 班開課後,我藉由刷題庫和做 side project 專題,填補了課前的不自信感和知識焦慮。最終我們小組在 2.5 個月內開發了一個訂閱制電商網站的前後台,我也參加了 F2E week1 完賽,獲得銀級徽章
這是我參加為期三個月的六角學院 2023 網頁前端切版直播班中的學習和成長經驗。最初參加直播班時誤以為自己已經具備足夠的前端知識,但後來發現自己的程式碼還有改進的空間。我在參與直播班的過程中,不僅學到了更多切版技術,也在小組協作中體驗到了組織能力和團隊合作的重要性,並從做設計稿與切版中發現個人優勢。
軟工體驗營最後一周,短短一個月的前端程式體驗,真的是非常超值的課程。不論是檢視自己對寫程式的感受,或是透過社群認識自己的新面向、軟實力的培養都是。六角是非常新手友善的程式學校,推薦給每位想學習前端的初心者朋友。
遭受學習挫折的一周,開始發現社群的重要性,最終還是回歸於自己報名體驗營的目的。
​最近在研究做 APP 的方法,以 web 前端開發者的身分來說,第一優先會先選擇能用 HTML 和 JS 的框架出發。這篇文章是針對 Ionic Angular 發生 R3InjectorError(Platform: core) 的除錯紀錄。
從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
我依舊維持著修習 JS 的步伐,但我仍然覺得自己對 JS 的熟悉度不足。在 JS 班開課後,我藉由刷題庫和做 side project 專題,填補了課前的不自信感和知識焦慮。最終我們小組在 2.5 個月內開發了一個訂閱制電商網站的前後台,我也參加了 F2E week1 完賽,獲得銀級徽章
這是我參加為期三個月的六角學院 2023 網頁前端切版直播班中的學習和成長經驗。最初參加直播班時誤以為自己已經具備足夠的前端知識,但後來發現自己的程式碼還有改進的空間。我在參與直播班的過程中,不僅學到了更多切版技術,也在小組協作中體驗到了組織能力和團隊合作的重要性,並從做設計稿與切版中發現個人優勢。
軟工體驗營最後一周,短短一個月的前端程式體驗,真的是非常超值的課程。不論是檢視自己對寫程式的感受,或是透過社群認識自己的新面向、軟實力的培養都是。六角是非常新手友善的程式學校,推薦給每位想學習前端的初心者朋友。
遭受學習挫折的一周,開始發現社群的重要性,最終還是回歸於自己報名體驗營的目的。
你可能也想看
Google News 追蹤
Thumbnail
最近國泰世華CUBE App推出的「美股定期定額」功能,讓使用者可以方便地進行跨境理財(但讀者仍需根據自身需求審慎考量),除了享有美股定期定額的新功能,也同時享有台股定期定額的功能,可以一站滿足我們理財的需求! 透過國泰世華CUBE App線上開台股證券戶+複委託戶,流程最快僅需要5分鐘。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
首先確定VS Code的版本,如果你的版本跟我一樣是1.92.0那麼你可以參考我的作法...
Thumbnail
本章節的目的是介紹在TypeScript中如何進行例外處理。涵蓋了例外處理的重要性、語法、常見異常類型以及如何主動觸發異常訊息及用戶自定義異常訊息。為讀者提供了全面而深入的了解,以提高程式的可靠性、提供更好的反饋、增加程式的容錯性以及改善程式的可讀性。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
在專案中與廠商測試API回傳的json字串出現無法解析的狀況,記錄發現過程與解決的紀錄,提供程式面和檔案面的解決方法。
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
本課程學習如何在 Android Studio 中使用快速查找功能來尋找程式碼錯誤問題。
Thumbnail
npm 做為 node 套件版本管理工具,今天來學習如何使用 npm 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 npm version --new-version major 範例 v1.0.0 -> v2.0.0 mi
Thumbnail
最近國泰世華CUBE App推出的「美股定期定額」功能,讓使用者可以方便地進行跨境理財(但讀者仍需根據自身需求審慎考量),除了享有美股定期定額的新功能,也同時享有台股定期定額的功能,可以一站滿足我們理財的需求! 透過國泰世華CUBE App線上開台股證券戶+複委託戶,流程最快僅需要5分鐘。
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
首先確定VS Code的版本,如果你的版本跟我一樣是1.92.0那麼你可以參考我的作法...
Thumbnail
本章節的目的是介紹在TypeScript中如何進行例外處理。涵蓋了例外處理的重要性、語法、常見異常類型以及如何主動觸發異常訊息及用戶自定義異常訊息。為讀者提供了全面而深入的了解,以提高程式的可靠性、提供更好的反饋、增加程式的容錯性以及改善程式的可讀性。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
在專案中與廠商測試API回傳的json字串出現無法解析的狀況,記錄發現過程與解決的紀錄,提供程式面和檔案面的解決方法。
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
本課程學習如何在 Android Studio 中使用快速查找功能來尋找程式碼錯誤問題。
Thumbnail
npm 做為 node 套件版本管理工具,今天來學習如何使用 npm 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 npm version --new-version major 範例 v1.0.0 -> v2.0.0 mi