How to solve error in ionic v6 NOT SUPPORTED: keyword "id", use "$id" for schema ID

Recently i was trying to add new page to my ionic application after upgrade to ionic 6 and angular 13+. While adding new component i faced a weird error.

NOT SUPPORTED: keyword "id", use "$id" for schema ID 😡

So immediately i asked one of my (everyone) helper (GOOGLE), why am i getting this error?

Everywhere solution i can find out is,
You just need to use the v13 prerelease with Angular 13. Just run this command.
ng add @angular-eslint/schematics@next
But it was not a charm for me.

Now what spending at least three - four hour tying to update each and every package, generating new ionic project, unable to solve this. At last i was thinking to give up and take a break. But as there is a famous saying

Where there is a will, there is a way.

and the developer version of it.

Where there is a bug, there is a solution on the google definitely

After adding the word ionic with the above error in google search, come across an ionic thread. Thanks to @obinnae to ask this question and @mhartington(Ionic Team) for providing the solution (hopefully some day they will join blurt too).

Solution

I need to remove the below snippet from angular.json

-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "app:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "app:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "app:ionic-cordova-build",
-            "devServerTarget": "app:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "app:ionic-cordova-build:production",
-              "devServerTarget": "app:serve:production"
-            }
-          }
-         }

Things learned:

Don't search only the error always add some keyword from up to down approach. I thought the error is due to some angular package so i was either searching the error directly or adding angular with error. but if i have tried it opposite way adding the base framework with error (ionic) could have saved many hours.
Where there is a bug, there is an amazing developer to provide you a solution and there is a google solution definitely.

References:

Cover Image By:

By Maxlynch - Own work, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=63948112