How to Use Angular Standalone with the Ionic CLI

For my own reference.

1. Update the CLI to the latest version

How much you install globally varies, but a full setup looks like this.

% npm install @ionic/cli@latest @angular/cli@latest -g
% npm install @ionic/angular-toolkit@latest -d

2. Rewrite the project's angular.json

json

  {
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
-   "schematics": {},
+   "schematics": {
+     "@ionic/angular-toolkit:page": {
+       "styleext": "scss",
+       "standalone": true
+     },
+     "@schematics/angular:component": {
+       "standalone": true
+     }
+   }
+ }

Summary

Simple enough. One caveat: if you have moved from RoutingModule to provideRouter, the routes file must follow this naming convention:

**.routes.ts

I had one file named **.routing.ts, and the CLI did not recognize it. After renaming it to **.routes.ts, the CLI picked it up correctly. Starter templates and CLI-generated projects use fixed router names, but if you create routes yourself, keep this in mind.

See you next time.