From 15c1e719282dc50f94328df906a2560a08093afa Mon Sep 17 00:00:00 2001 From: Matt Raible Date: Fri, 1 Dec 2023 17:18:45 -0700 Subject: [PATCH 1/4] Fix tests --- .../src/app/{app-routing.module.ts => app.routes.ts} | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) rename src/add-auth/ionic/angular/src/app/{app-routing.module.ts => app.routes.ts} (59%) diff --git a/src/add-auth/ionic/angular/src/app/app-routing.module.ts b/src/add-auth/ionic/angular/src/app/app.routes.ts similarity index 59% rename from src/add-auth/ionic/angular/src/app/app-routing.module.ts rename to src/add-auth/ionic/angular/src/app/app.routes.ts index db2457a2..3a0eba06 100644 --- a/src/add-auth/ionic/angular/src/app/app-routing.module.ts +++ b/src/add-auth/ionic/angular/src/app/app.routes.ts @@ -1,16 +1,8 @@ -import { NgModule } from '@angular/core'; -import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; +import { Routes } from '@angular/router'; -const routes: Routes = [ +export const routes: Routes = [ { path: '', loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) }, { 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) }, ]; -@NgModule({ - imports: [ - RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) - ], - exports: [RouterModule] -}) -export class AppRoutingModule {} From 2f1d71e91975bdeb6b8461d7c05bc79684b6f208 Mon Sep 17 00:00:00 2001 From: Matt Raible Date: Fri, 1 Dec 2023 17:26:35 -0700 Subject: [PATCH 2/4] Convert Ionic to standalone components --- README.md | 2 +- package-lock.json | 94 +++++++++++-------- package.json | 2 +- src/add-auth/angular-style_spec.ts | 2 +- src/add-auth/angular_spec.ts | 10 +- .../ionic/angular/src/app/app.component.ts | 4 +- src/add-auth/ionic_spec.ts | 38 +------- src/ng-add/index_spec.ts | 9 +- test-app.sh | 4 +- 9 files changed, 83 insertions(+), 82 deletions(-) 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/package-lock.json b/package-lock.json index 88f8d140..2808ab01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@angular-devkit/core": "16.2.1", "@angular-devkit/schematics": "16.2.1", "@angular/cdk": "16.2.3", - "@schematics/angular": "16.0.0", + "@schematics/angular": "17.0.5", "npm-check-updates": "16.14.4", "rxjs": "7.8.1", "semver": "7.5.4", @@ -390,33 +390,34 @@ } }, "node_modules/@schematics/angular": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-16.0.0.tgz", - "integrity": "sha512-Ao1Y0hEDa30JjWDLnUfOsD+9nnfdBFclfKFzR+7pvvFYCpSUhH1u+8e+7noruIxlP26+SpqPn3AF5+IRTGza8w==", + "version": "17.0.5", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.5.tgz", + "integrity": "sha512-sOc1UG4NiV+7cGwrbWPnyW71O+NgsKaFb2agSrVduRL7o4neMDeqF04ik4Kv1jKA7sZOQfPV+3cn6XI49Mumrw==", "dependencies": { - "@angular-devkit/core": "16.0.0", - "@angular-devkit/schematics": "16.0.0", + "@angular-devkit/core": "17.0.5", + "@angular-devkit/schematics": "17.0.5", "jsonc-parser": "3.2.0" }, "engines": { - "node": "^16.14.0 || >=18.10.0", + "node": "^18.13.0 || >=20.9.0", "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", "yarn": ">= 1.13.0" } }, "node_modules/@schematics/angular/node_modules/@angular-devkit/core": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.0.0.tgz", - "integrity": "sha512-YJKvAJlg4/lfP93pQNawlOTQalynWGpoatZU+1aXBgRh5YCTKu2S/A3gtQ71DBuhac76gJe1RpxDoq41kB2KlQ==", + "version": "17.0.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.0.5.tgz", + "integrity": "sha512-e1evgRabAfOZBnmFCe8E0oufcu+FzBe5hBzS94Dm42GlxdX965/M4yVKQxIMpjivQTmjl+AWb6cF1ltBdSGZeQ==", "dependencies": { "ajv": "8.12.0", "ajv-formats": "2.1.1", "jsonc-parser": "3.2.0", + "picomatch": "3.0.1", "rxjs": "7.8.1", "source-map": "0.7.4" }, "engines": { - "node": "^16.14.0 || >=18.10.0", + "node": "^18.13.0 || >=20.9.0", "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", "yarn": ">= 1.13.0" }, @@ -430,22 +431,33 @@ } }, "node_modules/@schematics/angular/node_modules/@angular-devkit/schematics": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-16.0.0.tgz", - "integrity": "sha512-9uFOqjOQdhnpxU5mku2LvBkV5Ave2ihHBFaQCH7vQ7DD+p4NpLHu93bMSh+f7k9W7F0lY18g9qrihRgK/7wfuA==", + "version": "17.0.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.0.5.tgz", + "integrity": "sha512-KYPku0qTb8B+TtRbFqXGYpJOPg1k6d5bNHV6n8jTc35mlEUUghOd7HkovdfkQ3cgGNQM56a74D1CvSeruZEGsA==", "dependencies": { - "@angular-devkit/core": "16.0.0", + "@angular-devkit/core": "17.0.5", "jsonc-parser": "3.2.0", - "magic-string": "0.30.0", + "magic-string": "0.30.5", "ora": "5.4.1", "rxjs": "7.8.1" }, "engines": { - "node": "^16.14.0 || >=18.10.0", + "node": "^18.13.0 || >=20.9.0", "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", "yarn": ">= 1.13.0" } }, + "node_modules/@schematics/angular/node_modules/picomatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-3.0.1.tgz", + "integrity": "sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@sigstore/bundle": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-1.1.0.tgz", @@ -2448,11 +2460,11 @@ } }, "node_modules/magic-string": { - "version": "0.30.0", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz", - "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==", + "version": "0.30.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", + "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.13" + "@jridgewell/sourcemap-codec": "^1.4.15" }, "engines": { "node": ">=12" @@ -4910,38 +4922,44 @@ } }, "@schematics/angular": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-16.0.0.tgz", - "integrity": "sha512-Ao1Y0hEDa30JjWDLnUfOsD+9nnfdBFclfKFzR+7pvvFYCpSUhH1u+8e+7noruIxlP26+SpqPn3AF5+IRTGza8w==", + "version": "17.0.5", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.5.tgz", + "integrity": "sha512-sOc1UG4NiV+7cGwrbWPnyW71O+NgsKaFb2agSrVduRL7o4neMDeqF04ik4Kv1jKA7sZOQfPV+3cn6XI49Mumrw==", "requires": { - "@angular-devkit/core": "16.0.0", - "@angular-devkit/schematics": "16.0.0", + "@angular-devkit/core": "17.0.5", + "@angular-devkit/schematics": "17.0.5", "jsonc-parser": "3.2.0" }, "dependencies": { "@angular-devkit/core": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-16.0.0.tgz", - "integrity": "sha512-YJKvAJlg4/lfP93pQNawlOTQalynWGpoatZU+1aXBgRh5YCTKu2S/A3gtQ71DBuhac76gJe1RpxDoq41kB2KlQ==", + "version": "17.0.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.0.5.tgz", + "integrity": "sha512-e1evgRabAfOZBnmFCe8E0oufcu+FzBe5hBzS94Dm42GlxdX965/M4yVKQxIMpjivQTmjl+AWb6cF1ltBdSGZeQ==", "requires": { "ajv": "8.12.0", "ajv-formats": "2.1.1", "jsonc-parser": "3.2.0", + "picomatch": "3.0.1", "rxjs": "7.8.1", "source-map": "0.7.4" } }, "@angular-devkit/schematics": { - "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-16.0.0.tgz", - "integrity": "sha512-9uFOqjOQdhnpxU5mku2LvBkV5Ave2ihHBFaQCH7vQ7DD+p4NpLHu93bMSh+f7k9W7F0lY18g9qrihRgK/7wfuA==", + "version": "17.0.5", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.0.5.tgz", + "integrity": "sha512-KYPku0qTb8B+TtRbFqXGYpJOPg1k6d5bNHV6n8jTc35mlEUUghOd7HkovdfkQ3cgGNQM56a74D1CvSeruZEGsA==", "requires": { - "@angular-devkit/core": "16.0.0", + "@angular-devkit/core": "17.0.5", "jsonc-parser": "3.2.0", - "magic-string": "0.30.0", + "magic-string": "0.30.5", "ora": "5.4.1", "rxjs": "7.8.1" } + }, + "picomatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-3.0.1.tgz", + "integrity": "sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag==" } } }, @@ -6360,11 +6378,11 @@ "integrity": "sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==" }, "magic-string": { - "version": "0.30.0", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz", - "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==", + "version": "0.30.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", + "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", "requires": { - "@jridgewell/sourcemap-codec": "^1.4.13" + "@jridgewell/sourcemap-codec": "^1.4.15" } }, "make-fetch-happen": { diff --git a/package.json b/package.json index 961330be..989ed6bd 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "@angular-devkit/core": "16.2.1", "@angular-devkit/schematics": "16.2.1", "@angular/cdk": "16.2.3", - "@schematics/angular": "16.0.0", + "@schematics/angular": "17.0.5", "npm-check-updates": "16.14.4", "rxjs": "7.8.1", "semver": "7.5.4", diff --git a/src/add-auth/angular-style_spec.ts b/src/add-auth/angular-style_spec.ts index 7ec2f26c..1b74396c 100755 --- a/src/add-auth/angular-style_spec.ts +++ b/src/add-auth/angular-style_spec.ts @@ -52,7 +52,7 @@ describe('OktaDev Schematics: Angular', () => { it('should use scss for style', (done) => { schematicRunner.runSchematic('add-auth', defaultOptions, appTree).then(tree => { const routingModule = tree.readContent('/projects/authtest/src/app/app.component.ts'); - expect(routingModule).toContain(`styleUrls: ['./app.component.scss']`); + expect(routingModule).toContain(`styleUrl: './app.component.scss'`); done(); }, done.fail); }); diff --git a/src/add-auth/angular_spec.ts b/src/add-auth/angular_spec.ts index afe5bcc4..68d7e625 100755 --- a/src/add-auth/angular_spec.ts +++ b/src/add-auth/angular_spec.ts @@ -65,7 +65,15 @@ describe('OktaDev Schematics: Angular', () => { }, done.fail); }); - it('should set the issuer & clientId in the app.config file', (done) => { + it('should import OktaAuthModule in the app config file', (done) => { + schematicRunner.runSchematic('add-auth', defaultOptions, appTree).then(tree => { + const appModule = tree.readContent('/projects/authtest/src/app/app.config.ts'); + expect(appModule).toMatch(/OktaAuthModule/); + done(); + }, done.fail); + }); + + it('should set the issuer & clientId in the app config file', (done) => { schematicRunner.runSchematic('add-auth', defaultOptions, appTree).then(tree => { const appModule = tree.readContent('/projects/authtest/src/app/app.config.ts'); expect(appModule).toContain(`issuer: '${defaultOptions.issuer}'`); 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..962e460a 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,13 @@ 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' + templateUrl: 'app.component.html', + imports: [IonApp, IonRouterOutlet] }) export class AppComponent { diff --git a/src/add-auth/ionic_spec.ts b/src/add-auth/ionic_spec.ts index 8945c9af..fc3a2f69 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'; @@ -54,13 +29,12 @@ describe('OktaDev Schematics: Ionic/Angular', () => { const runner = new SchematicTestRunner('schematics', collectionPath); await runner.runSchematicAsync('add-auth', testOptions, tree).toPromise(); - expect(tree.files.length).toEqual(30); + expect(tree.files.length).toEqual(29); expect(tree.files.sort()).toEqual([ '/package.json', - '/src/app/app-routing.module.ts', '/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', '/src/app/auth/auth-guard.service.ts', @@ -87,10 +61,10 @@ describe('OktaDev Schematics: Ionic/Angular', () => { '/src/environments/environment.prod.ts', '/src/environments/environment.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 +82,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/'; @@ -117,7 +90,7 @@ describe('OktaDev Schematics: Ionic/Angular', () => { const runner = new SchematicTestRunner('schematics', collectionPath); await runner.runSchematicAsync('add-auth', testOptions, tree).toPromise(); - expect(tree.files.length).toEqual(30); + expect(tree.files.length).toEqual(29); const env = tree.readContent('/src/environments/environment.ts'); expect(env).toContain(`client_id: '${testOptions.clientId}'`); @@ -129,7 +102,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.runSchematicAsync('add-auth', defaultOptions, tree).toPromise(); diff --git a/src/ng-add/index_spec.ts b/src/ng-add/index_spec.ts index 0562fb9c..97d87d06 100755 --- a/src/ng-add/index_spec.ts +++ b/src/ng-add/index_spec.ts @@ -49,11 +49,12 @@ describe('OktaDev Schematics: ng-add', () => { }, done.fail); }); - it('should set the issuer & clientId in app.config', (done) => { + it('should set the issuer & clientId in app config file', (done) => { schematicRunner.runSchematic('ng-add', defaultOptions, appTree).then(tree => { - const authModule = tree.readContent('/projects/authtest/src/app/app.config.ts'); - expect(authModule).toContain(`issuer: '${defaultOptions.issuer}'`); - expect(authModule).toContain(`clientId: '${defaultOptions.clientId}'`); + const appConfig = tree.readContent('/projects/authtest/src/app/app.config.ts'); + expect(appConfig).toMatch(/OktaAuthModule/); + expect(appConfig).toContain(`issuer: '${defaultOptions.issuer}'`); + expect(appConfig).toContain(`clientId: '${defaultOptions.clientId}'`); done(); }, done.fail); }); 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 From 95ba21e34cdfd4de8aa678e7cbfd97cab9731382 Mon Sep 17 00:00:00 2001 From: Matt Raible Date: Fri, 1 Dec 2023 17:47:41 -0700 Subject: [PATCH 3/4] More converting --- .../ionic/angular/src/app/app.component.ts | 1 + .../ionic/angular/src/app/app.routes.ts | 2 +- .../ionic/angular/src/app/tab1/tab1.page.ts | 5 ++++- src/add-auth/ionic/angular/src/main.ts | 22 +++++++++++++++++++ src/add-auth/ionic_spec.ts | 8 ++++--- 5 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 src/add-auth/ionic/angular/src/main.ts 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 962e460a..ab432299 100644 --- a/src/add-auth/ionic/angular/src/app/app.component.ts +++ b/src/add-auth/ionic/angular/src/app/app.component.ts @@ -6,6 +6,7 @@ import { AuthService } from 'ionic-appauth'; @Component({ selector: 'app-root', + standalone: true, templateUrl: 'app.component.html', imports: [IonApp, IonRouterOutlet] }) 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..9cddaf19 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,7 @@ 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 } from '@ionic/angular/standalone'; import { Subscription } from 'rxjs'; import { environment } from '../../environments/environment'; @@ -8,8 +9,10 @@ const { audience } = environment; @Component({ selector: 'app-tab1', + standalone: true, + imports: [IonHeader, IonToolbar, IonTitle, IonContent], 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 fc3a2f69..c57fc6f3 100644 --- a/src/add-auth/ionic_spec.ts +++ b/src/add-auth/ionic_spec.ts @@ -29,7 +29,7 @@ describe('OktaDev Schematics: Ionic/Angular', () => { const runner = new SchematicTestRunner('schematics', collectionPath); await runner.runSchematicAsync('add-auth', testOptions, tree).toPromise(); - expect(tree.files.length).toEqual(29); + expect(tree.files.length).toEqual(30); expect(tree.files.sort()).toEqual([ '/package.json', '/src/app/app.component.spec.ts', @@ -59,7 +59,9 @@ 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/auth/auth.module.ts'); @@ -90,7 +92,7 @@ describe('OktaDev Schematics: Ionic/Angular', () => { const runner = new SchematicTestRunner('schematics', collectionPath); await runner.runSchematicAsync('add-auth', testOptions, tree).toPromise(); - expect(tree.files.length).toEqual(29); + expect(tree.files.length).toEqual(30); const env = tree.readContent('/src/environments/environment.ts'); expect(env).toContain(`client_id: '${testOptions.clientId}'`); From 72ac4d827c6ef4390925cee74b6907ba0e76f390 Mon Sep 17 00:00:00 2001 From: Matt Raible Date: Fri, 1 Dec 2023 18:15:32 -0700 Subject: [PATCH 4/4] Seems like a lot, modules might be better --- src/add-auth/ionic/angular/src/app/tab1/tab1.page.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 9cddaf19..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,7 +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 } from '@ionic/angular/standalone'; +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'; @@ -10,7 +11,7 @@ const { audience } = environment; @Component({ selector: 'app-tab1', standalone: true, - imports: [IonHeader, IonToolbar, IonTitle, IonContent], + imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonLabel, IonIcon, IonItem, IonListHeader, IonList, IonCardContent, IonCardHeader, IonCardTitle, IonCard, IonButton, IonImg, JsonPipe], templateUrl: 'tab1.page.html', styleUrl: 'tab1.page.scss' })