diff --git a/README.md b/README.md index 5f48445d..8c82fa4f 100644 --- a/README.md +++ b/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 ``` diff --git a/src/add-auth/ionic/angular/src/app/app.component.ts b/src/add-auth/ionic/angular/src/app/app.component.ts index ccdf207a..ab432299 100644 --- a/src/add-auth/ionic/angular/src/app/app.component.ts +++ b/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 { diff --git a/src/add-auth/ionic/angular/src/app/app.routes.ts b/src/add-auth/ionic/angular/src/app/app.routes.ts index 3a0eba06..df960b63 100644 --- a/src/add-auth/ionic/angular/src/app/app.routes.ts +++ b/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) }, diff --git a/src/add-auth/ionic/angular/src/app/tab1/tab1.page.ts b/src/add-auth/ionic/angular/src/app/tab1/tab1.page.ts index 63fb40b5..e6d94334 100644 --- a/src/add-auth/ionic/angular/src/app/tab1/tab1.page.ts +++ b/src/add-auth/ionic/angular/src/app/tab1/tab1.page.ts @@ -1,6 +1,8 @@ +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'; @@ -8,8 +10,10 @@ 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$; diff --git a/src/add-auth/ionic/angular/src/main.ts b/src/add-auth/ionic/angular/src/main.ts new file mode 100644 index 00000000..201d6487 --- /dev/null +++ b/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), + ], +}); diff --git a/src/add-auth/ionic_spec.ts b/src/add-auth/ionic_spec.ts index 1e515557..596fe482 100644 --- a/src/add-auth/ionic_spec.ts +++ b/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); diff --git a/test-app.sh b/test-app.sh index 9a7d6334..d7282888 100755 --- a/test-app.sh +++ b/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