Convert Ionic to standalone components

README.md

@@ -264,7 +264,7 @@ Create a new Ionic + Angular project with Ionic CLI. You **must** use the `tabs`
 
 ```
 npm install -g @ionic/cli
-ionic start secure-ionic tabs --type=angular --no-interactive 
+ionic start secure-ionic tabs --type=angular-standalone --no-interactive 
 cd secure-ionic
 ```
 

src/add-auth/ionic/angular/src/app/app.component.ts

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 import { SplashScreen } from '@capacitor/splash-screen';
 import { AuthService } from 'ionic-appauth';
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html'
+  standalone: true,
+  templateUrl: 'app.component.html',
+  imports: [IonApp, IonRouterOutlet]
 })
 export class AppComponent {
 

src/add-auth/ionic/angular/src/app/app.routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router';
 
 export const routes: Routes = [
-  { path: '', loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) },
+  { path: '', loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes) },
   { path: 'callback', loadChildren: () => import('./auth/auth-callback/auth-callback.module').then(m => m.AuthCallbackPageModule) },
   { path: 'logout', loadChildren: () => import('./auth/end-session/end-session.module').then(m => m.EndSessionPageModule) },
   { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule) },

src/add-auth/ionic/angular/src/app/tab1/tab1.page.ts

@@ -1,15 +1,19 @@
+import { JsonPipe } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NavController } from '@ionic/angular';
 import { AuthActions, AuthService, Browser, IAuthAction } from 'ionic-appauth';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonLabel, IonIcon, IonItem, IonListHeader, IonList, IonCardContent, IonCardHeader, IonCardTitle, IonCard, IonButton, IonImg } from '@ionic/angular/standalone';
 import { Subscription } from 'rxjs';
 import { environment } from '../../environments/environment';
 
 const { audience } = environment;
 
 @Component({
   selector: 'app-tab1',
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonLabel, IonIcon, IonItem, IonListHeader, IonList, IonCardContent, IonCardHeader, IonCardTitle, IonCard, IonButton, IonImg, JsonPipe],
   templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss']
+  styleUrl: 'tab1.page.scss'
 })
 export class Tab1Page implements OnInit, OnDestroy {
   user$ = this.auth.user$;

src/add-auth/ionic/angular/src/main.ts

@@ -0,0 +1,22 @@
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+
+import { routes } from './app/app.routes';
+import { AppComponent } from './app/app.component';
+import { environment } from './environments/environment';
+import { AuthModule } from "./app/auth/auth.module";
+
+if (environment.production) {
+  enableProdMode();
+}
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    importProvidersFrom(AuthModule),
+    provideIonicAngular(),
+    provideRouter(routes),
+  ],
+});

src/add-auth/ionic_spec.ts

@@ -10,30 +10,6 @@ const defaultOptions: any = {
   clientId: '0oaifymbuodpH8nAi0h7'
 };
 
-const defaultAppModule: string = `import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouteReuseStrategy } from '@angular/router';
-
-import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  entryComponents: [],
-  imports: [BrowserModule, IonicModule, AppRoutingModule],
-  providers: [
-    StatusBar,
-    SplashScreen,
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}`;
-
 describe('OktaDev Schematics: Ionic/Angular', () => {
   it('requires required issuer option', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
@@ -46,7 +22,6 @@ describe('OktaDev Schematics: Ionic/Angular', () => {
     const tree = new UnitTestTree(new HostTree);
 
     tree.create('/package.json', JSON.stringify(packageJson));
-    tree.create('/src/app/app.module.ts', defaultAppModule);
 
     const testOptions: any = {...defaultOptions};
     testOptions.platform = 'capacitor';
@@ -59,7 +34,6 @@ describe('OktaDev Schematics: Ionic/Angular', () => {
       '/package.json',
       '/src/app/app.component.spec.ts',
       '/src/app/app.component.ts',
-      '/src/app/app.module.ts',
       '/src/app/app.routes.ts',
       '/src/app/auth/auth-callback/auth-callback.module.ts',
       '/src/app/auth/auth-callback/auth-callback.page.ts',
@@ -85,12 +59,14 @@ describe('OktaDev Schematics: Ionic/Angular', () => {
       '/src/app/tab1/tab1.page.spec.ts',
       '/src/app/tab1/tab1.page.ts',
       '/src/environments/environment.prod.ts',
-      '/src/environments/environment.ts' ]);
+      '/src/environments/environment.ts',
+      '/src/main.ts'
+    ]);
 
-    const appModule = tree.readContent('/src/app/app.module.ts');
+    const appModule = tree.readContent('/src/app/auth/auth.module.ts');
 
     expect(appModule).toMatch(/AuthModule/);
-    expect(appModule).toMatch(/HttpClientModule/);
+    expect(appModule).toMatch(/HttpClient/);
 
     const env = tree.readContent('/src/environments/environment.ts');
     expect(env).toContain(`client_id: '${defaultOptions.clientId}'`);
@@ -108,7 +84,6 @@ describe('OktaDev Schematics: Ionic/Angular', () => {
     const tree = new UnitTestTree(new HostTree);
 
     tree.create('/package.json', JSON.stringify(packageJson));
-    tree.create('/src/app/app.module.ts', defaultAppModule);
 
     const testOptions: any = {...defaultOptions};
     testOptions.issuer = 'https://dev-06bzs1cu.us.auth0.com/';
@@ -129,7 +104,6 @@ describe('OktaDev Schematics: Ionic/Angular', () => {
     const tree = new UnitTestTree(new HostTree);
 
     tree.create('/package.json', JSON.stringify(packageJson));
-    tree.create('/src/app/app.module.ts', defaultAppModule);
 
     const runner = new SchematicTestRunner('schematics', collectionPath);
     await runner.runSchematic('add-auth', defaultOptions, tree);

test-app.sh

@@ -185,14 +185,14 @@ EOF
   npm run test:unit
 elif [ $framework == "ionic" ] || [ $framework == "i" ]
 then
-  ionic start ionic-app tabs --type angular --no-interactive
+  ionic start ionic-app tabs --type angular-standalone --no-interactive
   cd ionic-app
   npm install -D ../../oktadev*.tgz
   schematics @oktadev/schematics:add-auth --issuer=$issuer --client-id=$clientId
   npm run build && ng test --watch=false
 elif [ $framework == "ionic-auth0" ] || [ $framework == "i0" ]
 then
-  ionic start ionic-auth0 tabs --type angular --no-interactive
+  ionic start ionic-auth0 tabs --type angular-standalone --no-interactive
   cd ionic-auth0
   npm install -D ../../oktadev*.tgz
   schematics @oktadev/schematics:add-auth --issuer=$auth0Issuer --client-id=$auth0ClientId --auth0