diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index cdd3c94d..65407eea 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -34,8 +34,13 @@ jobs:
       # Connect your workspace on nx.app and uncomment this to enable task distribution.
       # The "--stop-agents-after" is optional, but allows idle agents to shut down once the "build" targets have been requested
       - run: pnpm install --no-frozen-lockfile
-      - uses: nrwl/nx-set-shas@v4
+      - uses:
+          nrwl/nx-set-shas@v3
+          # This line is needed for nx affected to work when CI is running on a PR
+      - run: git branch --track main origin/main
+        if: ${{ github.event_name == 'pull_request' }}
+      #- uses: nrwl/nx-set-shas@v4
       #- run: pnpm exec nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="build"
 
-      - run: pnpm exec nx-cloud record -- nx format:check
-      - run: pnpm exec nx affected -t lint test build
+      #- run: pnpm exec nx-cloud record -- nx format:check
+      - run: pnpm exec nx affected -t lint test build e2e
diff --git a/.prettierignore b/.prettierignore
index 5ac94505..58be25df 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,4 +7,6 @@
 /build
 
 /.nx/cache
+
+
 pnpm-lock.yaml
diff --git a/docs/docs/ionic-angular/generators.md b/docs/docs/ionic-angular/generators.md
index 8f49be44..7c74cdcf 100644
--- a/docs/docs/ionic-angular/generators.md
+++ b/docs/docs/ionic-angular/generators.md
@@ -70,7 +70,7 @@ Skip formatting files.
 
 #### standalone
 
-Default: `false`
+Default: `true`
 
 Type: `boolean`
 
diff --git a/jest.preset.js b/jest.preset.js
index b85c8b17..2da29442 100644
--- a/jest.preset.js
+++ b/jest.preset.js
@@ -1,7 +1,7 @@
 const nxPreset = require('@nx/jest/preset').default;
+
 module.exports = {
   ...nxPreset,
-  testTimeout: 500000,
   /* TODO: Update to latest Jest snapshotFormat
    * By default Nx has kept the older style of Jest Snapshot formats
    * to prevent breaking of any existing tests with snapshots.
diff --git a/nx.json b/nx.json
index 0b262990..cf347e09 100644
--- a/nx.json
+++ b/nx.json
@@ -118,7 +118,6 @@
       "!{projectRoot}/eslint.config.js"
     ]
   },
-  "nxCloudAccessToken": "NTlhMGE3ZTYtYjk5OC00Mzc5LWE2ZTAtNzE4ODEzNDY5MjlmfHJlYWQ=",
   "parallel": 1,
   "pluginsConfig": {
     "@nx/js": {
diff --git a/package.json b/package.json
index 7bf98101..57be853d 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@nx/cypress": "18.3.1",
     "@nx/devkit": "18.3.1",
     "@nx/eslint": "18.3.1",
+    "@nx/webpack": "18.3.1",
     "@nx/eslint-plugin": "18.3.1",
     "@nx/jest": "18.3.1",
     "@nx/js": "18.3.1",
@@ -128,10 +129,10 @@
   },
   "lint-staged": {
     "nx.json": [
-      "yarn format --uncommitted"
+      "pnpm format --uncommitted"
     ],
     "*.{js,json,css,scss,md,ts,html,graphql}": [
-      "yarn format --uncommitted"
+      "pnpm format --uncommitted"
     ]
   },
   "config": {
diff --git a/packages/capacitor/package.json b/packages/capacitor/package.json
index 5e66ae17..0041a25e 100644
--- a/packages/capacitor/package.json
+++ b/packages/capacitor/package.json
@@ -1,11 +1,7 @@
 {
   "name": "@nxext/capacitor",
-  "version": "18.0.4",
+  "version": "18.0.0",
   "description": "An Nx plugin for developing cross-platform applications using Capacitor",
-  "author": {
-    "name": "Devin Shoemaker",
-    "email": "devinshoe@gmail.com"
-  },
   "homepage": "https://nxext.github.io/nx-extensions-ionic/docs/capacitor/getting-started.html",
   "repository": {
     "type": "git",
@@ -28,5 +24,7 @@
     "ignore": "^5.3.1",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/web": "^18.3.0"
+  }
 }
diff --git a/packages/capacitor/plugin.ts b/packages/capacitor/plugin.ts
new file mode 100644
index 00000000..431f8b37
--- /dev/null
+++ b/packages/capacitor/plugin.ts
@@ -0,0 +1,7 @@
+/*
+export {
+  createNodes,
+  PlaywrightPluginOptions,
+  createDependencies,
+} from './src/plugins/plugin';
+*/
diff --git a/packages/capacitor/src/generators/capacitor-project/generator.ts b/packages/capacitor/src/generators/capacitor-project/generator.ts
index 53a70982..5ff72f12 100644
--- a/packages/capacitor/src/generators/capacitor-project/generator.ts
+++ b/packages/capacitor/src/generators/capacitor-project/generator.ts
@@ -26,6 +26,3 @@ export async function capacitorProjectGenerator(
 }
 
 export default capacitorProjectGenerator;
-export const capacitorProjectSchematic = convertNxGenerator(
-  capacitorProjectGenerator
-);
diff --git a/packages/capacitor/src/plugins/plugin.spec.ts b/packages/capacitor/src/plugins/plugin.spec.ts
new file mode 100644
index 00000000..56ce15fa
--- /dev/null
+++ b/packages/capacitor/src/plugins/plugin.spec.ts
@@ -0,0 +1,5 @@
+xdescribe('Plugin', () => {
+  beforeEach(() => {});
+
+  it('', async () => {});
+});
diff --git a/packages/capacitor/src/plugins/plugin.ts b/packages/capacitor/src/plugins/plugin.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/capacitor/src/utils/versions.ts b/packages/capacitor/src/utils/versions.ts
index e072249f..a1d82895 100644
--- a/packages/capacitor/src/utils/versions.ts
+++ b/packages/capacitor/src/utils/versions.ts
@@ -1 +1 @@
-export const capacitorVersion = '^5.0.3';
+export const capacitorVersion = '^6.0.0';
diff --git a/packages/ionic-angular/jest.config.ts b/packages/ionic-angular/jest.config.ts
index 8a3e0976..1f874c5f 100644
--- a/packages/ionic-angular/jest.config.ts
+++ b/packages/ionic-angular/jest.config.ts
@@ -4,12 +4,7 @@ module.exports = {
   preset: '../../jest.preset.js',
   globals: {},
   transform: {
-    '^.+\\.[tj]s$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-      },
-    ],
+    '^.+\\.[tj]sx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/packages/ionic-angular',
diff --git a/packages/ionic-angular/package.json b/packages/ionic-angular/package.json
index 13966fa1..09b1d8b5 100644
--- a/packages/ionic-angular/package.json
+++ b/packages/ionic-angular/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@nxext/ionic-angular",
-  "version": "18.0.4",
+  "version": "18.0.0",
   "description": "An Nx plugin for developing Ionic React applications and libraries",
   "author": {
-    "name": "Devin Shoemaker",
-    "email": "devinshoe@gmail.com"
+    "name": "Dominik Pieper",
+    "email": "dominik@pieper.io"
   },
   "homepage": "https://nxext.github.io/nx-extensions-ionic/docs/ionic-angular/overview.html",
   "repository": {
@@ -25,7 +25,7 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nxext/capacitor": "^18.0.4",
+    "@nxext/capacitor": "18.0.0",
     "@nx/devkit": "18.3.1",
     "@nx/eslint": "18.3.1",
     "@nx/angular": "18.3.1",
@@ -34,5 +34,8 @@
     "typescript": "5.4.5",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/angular": "^18.3.0",
+    "@nx/eslint": "^18.3.0"
+  }
 }
diff --git a/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.spec.ts.template b/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.spec.ts.template
index 51b7b65a..224462e5 100644
--- a/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.spec.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.spec.ts.template
@@ -1,21 +1,16 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
   it('should create the app', () => {
+    TestBed.overrideComponent(AppComponent, {
+      add: {
+        imports: [RouterTestingModule]
+      }
+    });
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
 });
diff --git a/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.ts.template b/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.ts.template
index ed79833d..c5ba44f1 100644
--- a/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.ts.template
@@ -1,18 +1,11 @@
 import { Component } from '@angular/core';
-import {IonicModule} from '@ionic/angular';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
 @Component({
-  selector: '<%= prefix %>-root',
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
   standalone: true,
-  imports: [IonicModule],
-  template: `
-    <ion-app>
-      <ion-router-outlet></ion-router-outlet>
-    </ion-app>
-  `,
-  styles: `
-
-  `
+  imports: [IonApp, IonRouterOutlet],
 })
 export class AppComponent {
   constructor() {}
diff --git a/packages/ionic-angular/src/generators/application/files/base-standalone/src/styles.scss.template b/packages/ionic-angular/src/generators/application/files/base-standalone/src/styles.scss.template
index 097cf6de..791a6308 100644
--- a/packages/ionic-angular/src/generators/application/files/base-standalone/src/styles.scss.template
+++ b/packages/ionic-angular/src/generators/application/files/base-standalone/src/styles.scss.template
@@ -8,3 +8,19 @@
  * For more information on global stylesheets, visit the documentation:
  * https://ionicframework.com/docs/layout/global-stylesheets
  */
+
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/display.css";
+
+/* Optional CSS utils that can be commented out */
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
diff --git a/packages/ionic-angular/src/generators/application/files/base-standalone/src/theme/variables.scss.template b/packages/ionic-angular/src/generators/application/files/base-standalone/src/theme/variables.scss.template
index eae59259..f81e9414 100644
--- a/packages/ionic-angular/src/generators/application/files/base-standalone/src/theme/variables.scss.template
+++ b/packages/ionic-angular/src/generators/application/files/base-standalone/src/theme/variables.scss.template
@@ -234,3 +234,11 @@
     --ion-card-background: #1e1e1e;
   }
 }
+
+html {
+  /*
+   * For more information on dynamic font scaling, visit the documentation:
+   * https://ionicframework.com/docs/layout/dynamic-font-scaling
+   */
+  --ion-dynamic-font: var(--ion-default-dynamic-font);
+}
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.spec.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.spec.ts.template
new file mode 100644
index 00000000..224462e5
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.spec.ts.template
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  it('should create the app', () => {
+    TestBed.overrideComponent(AppComponent, {
+      add: {
+        imports: [RouterTestingModule]
+      }
+    });
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.ts.template
index 7ca24ea0..c8e0754e 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.ts.template
@@ -1,17 +1,12 @@
-import {Component} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {IonicModule} from '@ionic/angular';
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
 @Component({
   selector: '<%= prefix %>-root',
+  templateUrl: 'app.component.html',
   standalone: true,
-  imports: [CommonModule, IonicModule],
-  template: `
-    <ion-app>
-      <ion-router-outlet></ion-router-outlet>
-    </ion-app>
-  `,
-  styles: ``
+  imports: [IonApp, IonRouterOutlet],
 })
-
-export class AppComponent {}
+export class AppComponent {
+  constructor() {}
+}
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.config.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.config.ts.template
index 8c60f9f6..1b5f0bc0 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.config.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.config.ts.template
@@ -1,14 +1,13 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/core';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+
 import { appRoutes } from './app.routes';
-import {IonicModule} from '@ionic/angular';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideRouter(appRoutes),
-    importProvidersFrom(
-      IonicModule.forRoot()
-    )
-    
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    provideIonicAngular(),
+    provideRouter(appRoutes)
   ],
 };
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.routes.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.routes.ts.template
index 4f484391..dbc68645 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.routes.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.routes.ts.template
@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
 export const appRoutes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then(r => r.routes)
-  }
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
 ];
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.html.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.html.template
new file mode 100644
index 00000000..a3fcb604
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.html.template
@@ -0,0 +1,12 @@
+<div id="container">
+  <strong>{{ name }}</strong>
+  <p>
+    Explore
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href="https://ionicframework.com/docs/components"
+      >UI Components</a
+    >
+  </p>
+</div>
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.scss.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.scss.template
new file mode 100644
index 00000000..34a8a465
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.scss.template
@@ -0,0 +1,27 @@
+#container {
+  text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+
+  color: #8c8c8c;
+
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.spec.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.spec.ts.template
index caa9a7cd..aa956d9b 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.spec.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.spec.ts.template
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
 
 import { ExploreContainerComponent } from './explore-container.component';
 
@@ -8,11 +7,6 @@ describe('ExploreContainerComponent', () => {
   let fixture: ComponentFixture<ExploreContainerComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ExploreContainerComponent],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
     fixture = TestBed.createComponent(ExploreContainerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.ts.template
index b375cd25..d2073a62 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.ts.template
@@ -1,50 +1,11 @@
 import { Component, Input } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {IonicModule} from '@ionic/angular';
 
 @Component({
-  selector: '<%= prefix %>-explore-container',
+  selector: 'app-explore-container',
+  templateUrl: './explore-container.component.html',
+  styleUrls: ['./explore-container.component.scss'],
   standalone: true,
-  imports: [ CommonModule, FormsModule, IonicModule ],
-  template: `
-    <div id="container">
-      <strong>{{ name }}</strong>
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  `,
-  styles: `
-    #container {
-      text-align: center;
-
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    #container strong {
-      font-size: 20px;
-      line-height: 26px;
-    }
-
-    #container p {
-      font-size: 16px;
-      line-height: 22px;
-
-      color: #8c8c8c;
-
-      margin: 0;
-    }
-
-    #container a {
-      text-decoration: none;
-    }
-  `
 })
 export class ExploreContainerComponent {
-
   @Input() name?: string;
-
 }
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.html.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.html.template
new file mode 100644
index 00000000..22e11e47
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.html.template
@@ -0,0 +1,17 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Tab 1
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 1</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <app-explore-container name="Tab 1 page"></app-explore-container>
+</ion-content>
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.scss.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.scss.template
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.spec.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.spec.ts.template
index 0dbb7c0a..fcc00f94 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.spec.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.spec.ts.template
@@ -1,7 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
 import { Tab1Page } from './tab1.page';
 
@@ -10,11 +7,6 @@ describe('Tab1Page', () => {
   let fixture: ComponentFixture<Tab1Page>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [Tab1Page],
-      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
-    }).compileComponents();
-
     fixture = TestBed.createComponent(Tab1Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.ts.template
index 485eec68..125fdf9b 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.ts.template
@@ -1,43 +1,14 @@
 import { Component } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {IonicModule} from '@ionic/angular';
-import {ExploreContainerComponent} from '../explore-container/explore-container.component';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
-  selector: '<%= prefix %>-tab1',
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    ExploreContainerComponent
-  ],
-  template: `
-    <ion-header [translucent]="true">
-      <ion-toolbar>
-        <ion-title>
-          Tab 1
-        </ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content [fullscreen]="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 1</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <<%= prefix %>-explore-container name="Tab 1 page"></<%= prefix %>-explore-container>
-    </ion-content>
-  `,
-  styles: `
-
-  `
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
 })
 export class Tab1Page {
-
   constructor() {}
-
 }
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.routes.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.routes.ts.template
deleted file mode 100644
index 3a27bf36..00000000
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.routes.ts.template
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Tab1Page } from './tab1.page';
-import {Routes} from '@angular/router';
-
-export const routes: Routes = [
-  {
-    path: '',
-    loadComponent: () => import('./tab1.page').then(p => p.Tab1Page)
-  }
-];
-
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.html.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.html.template
new file mode 100644
index 00000000..38b153ec
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.html.template
@@ -0,0 +1,17 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Tab 2
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 2</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <app-explore-container name="Tab 2 page"></app-explore-container>
+</ion-content>
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.scss.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.scss.template
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.spec.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.spec.ts.template
index 70bd876e..92c0cac4 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.spec.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.spec.ts.template
@@ -1,7 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
 import { Tab2Page } from './tab2.page';
 
@@ -10,11 +7,6 @@ describe('Tab2Page', () => {
   let fixture: ComponentFixture<Tab2Page>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [Tab2Page],
-      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
-    }).compileComponents();
-
     fixture = TestBed.createComponent(Tab2Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.ts.template
index efc01758..6fd1fdda 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.page.ts.template
@@ -1,39 +1,13 @@
 import { Component } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {IonicModule} from '@ionic/angular';
-import {ExploreContainerComponent} from '../explore-container/explore-container.component';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
-  selector: '<%= prefix %>-tab2',
+  selector: 'app-tab2',
+  templateUrl: 'tab2.page.html',
+  styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    ExploreContainerComponent,
-  ],
-  template: `
-    <ion-header [translucent]="true">
-      <ion-toolbar>
-        <ion-title>
-          Tab 2
-        </ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content [fullscreen]="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 2</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <<%= prefix %>-explore-container name="Tab 2 page"></<%= prefix %>-explore-container>
-    </ion-content>
-
-  `,
-  styles: ``
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
 })
 export class Tab2Page {
 
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.routes.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.routes.ts.template
deleted file mode 100644
index e9f94ce5..00000000
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab2/tab2.routes.ts.template
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Tab2Page } from './tab2.page';
-import {Routes} from '@angular/router';
-
-export const routes: Routes = [
-  {
-    path: '',
-    loadComponent: () => import('./tab2.page').then(p => p.Tab2Page),
-  }
-];
-
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.html.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.html.template
new file mode 100644
index 00000000..222333d5
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.html.template
@@ -0,0 +1,17 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Tab 3
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 3</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <app-explore-container name="Tab 3 page"></app-explore-container>
+</ion-content>
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.scss.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.scss.template
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.spec.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.spec.ts.template
index 28d86196..a03da993 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.spec.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.spec.ts.template
@@ -1,7 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
-
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
 import { Tab3Page } from './tab3.page';
 
@@ -10,11 +7,6 @@ describe('Tab3Page', () => {
   let fixture: ComponentFixture<Tab3Page>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [Tab3Page],
-      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
-    }).compileComponents();
-
     fixture = TestBed.createComponent(Tab3Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.ts.template
index b8b97290..5e29647d 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.page.ts.template
@@ -1,41 +1,14 @@
 import { Component } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {IonicModule} from '@ionic/angular';
-import {ExploreContainerComponent} from '../explore-container/explore-container.component';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
-  selector: '<%= prefix %>-tab3',
+  selector: 'app-tab3',
+  templateUrl: 'tab3.page.html',
+  styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    ExploreContainerComponent,
-  ],
-  template: `
-    <ion-header [translucent]="true">
-      <ion-toolbar>
-        <ion-title>
-          Tab 3
-        </ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content [fullscreen]="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 3</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <<%= prefix %>-explore-container name="Tab 3 page"></<%= prefix %>-explore-container>
-    </ion-content>
-  `,
-  styles: ``
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
 })
 export class Tab3Page {
-
   constructor() {}
-
 }
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.routes.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.routes.ts.template
deleted file mode 100644
index c53591dd..00000000
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab3/tab3.routes.ts.template
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Tab3Page } from './tab3.page';
-import {Routes} from '@angular/router';
-
-export const routes: Routes = [
-  {
-    path: '',
-    loadComponent: () => import('./tab3.page').then(p => p.Tab3Page)
-  }
-];
-
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.html.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.html.template
new file mode 100644
index 00000000..0f38384c
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.html.template
@@ -0,0 +1,18 @@
+<ion-tabs>
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="tab1" href="/tabs/tab1">
+      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+      <ion-label>Tab 1</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab2" href="/tabs/tab2">
+      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+      <ion-label>Tab 2</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="tab3" href="/tabs/tab3">
+      <ion-icon aria-hidden="true" name="square"></ion-icon>
+      <ion-label>Tab 3</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.scss.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.scss.template
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.spec.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.spec.ts.template
index 40a3de8b..5e44b104 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.spec.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.spec.ts.template
@@ -1,5 +1,5 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { TabsPage } from './tabs.page';
 
@@ -8,10 +8,11 @@ describe('TabsPage', () => {
   let fixture: ComponentFixture<TabsPage>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TabsPage],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
+    TestBed.overrideComponent(TabsPage, {
+      add: {
+        imports: [RouterTestingModule]
+      }
+    });
   });
 
   beforeEach(() => {
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.ts.template
index 1516e0ec..62fd0c0f 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.page.ts.template
@@ -1,43 +1,19 @@
-import { Component } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {IonicModule} from '@ionic/angular';
+import { Component, EnvironmentInjector, inject } from '@angular/core';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { triangle, ellipse, square } from 'ionicons/icons';
 
 @Component({
-  selector: '<%= prefix %>-tabs',
+  selector: 'app-tabs',
+  templateUrl: 'tabs.page.html',
+  styleUrls: ['tabs.page.scss'],
   standalone: true,
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule
-  ],
-  template: `
-    <ion-tabs>
-
-      <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="tab1">
-          <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-          <ion-label>Tab 1</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="tab2">
-          <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-          <ion-label>Tab 2</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="tab3">
-          <ion-icon aria-hidden="true" name="square"></ion-icon>
-          <ion-label>Tab 3</ion-label>
-        </ion-tab-button>
-      </ion-tab-bar>
-
-    </ion-tabs>
-
-  `,
-  styles: ``
+  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
 })
 export class TabsPage {
+  public environmentInjector = inject(EnvironmentInjector);
 
-  constructor() {}
-
+  constructor() {
+    addIcons({ triangle, ellipse, square });
+  }
 }
diff --git a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.routes.ts.template b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.routes.ts.template
index 4f778aba..15ba9e57 100644
--- a/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.routes.ts.template
+++ b/packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tabs/tabs.routes.ts.template
@@ -1,34 +1,36 @@
+import { Routes } from '@angular/router';
 import { TabsPage } from './tabs.page';
-import {Routes} from '@angular/router';
 
 export const routes: Routes = [
   {
     path: 'tabs',
-    loadComponent: () => import('./tabs.page').then(p => p.TabsPage),
+    component: TabsPage,
     children: [
       {
         path: 'tab1',
-        loadChildren: () => import('../tab1/tab1.routes').then(r => r.routes)
+        loadComponent: () =>
+          import('../tab1/tab1.page').then((m) => m.Tab1Page),
       },
       {
         path: 'tab2',
-        loadChildren: () => import('../tab2/tab2.routes').then(r => r.routes)
+        loadComponent: () =>
+          import('../tab2/tab2.page').then((m) => m.Tab2Page),
       },
       {
         path: 'tab3',
-        loadChildren: () => import('../tab3/tab3.routes').then(r => r.routes)
+        loadComponent: () =>
+          import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
       {
         path: '',
         redirectTo: '/tabs/tab1',
-        pathMatch: 'full'
-      }
-    ]
+        pathMatch: 'full',
+      },
+    ],
   },
   {
     path: '',
     redirectTo: '/tabs/tab1',
-    pathMatch: 'full'
-  }
+    pathMatch: 'full',
+  },
 ];
-
diff --git a/packages/ionic-angular/src/generators/application/generator.spec.ts b/packages/ionic-angular/src/generators/application/generator.spec.ts
index 57dc7cac..77e7d247 100644
--- a/packages/ionic-angular/src/generators/application/generator.spec.ts
+++ b/packages/ionic-angular/src/generators/application/generator.spec.ts
@@ -1,31 +1,33 @@
-import { readJson, readProjectConfiguration, Tree } from '@nx/devkit';
+import { readJson, readProjectConfiguration } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { applicationGenerator } from './generator';
 import { ApplicationGeneratorSchema } from './schema';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const devkit = require('@nx/devkit');
-
-xdescribe('application schematic', () => {
-  jest.spyOn(devkit, 'ensurePackage').mockReturnValue(Promise.resolve());
-
-  let host: Tree;
-  const options: ApplicationGeneratorSchema = {
-    name: 'my-app',
-    template: 'blank',
-    unitTestRunner: 'jest',
-    e2eTestRunner: 'cypress',
-    capacitor: false,
-    skipFormat: false,
+import { UnitTestRunner, E2eTestRunner } from '@nx/angular/generators';
+import { GeneratorTemplate } from './lib/templates.type';
+
+describe('application schematic', () => {
+  const setup = async () => {
+    const host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    host.write('.gitignore', '');
+    const schema: ApplicationGeneratorSchema = {
+      name: 'my-app',
+      template: GeneratorTemplate.Blank,
+      unitTestRunner: UnitTestRunner.None,
+      e2eTestRunner: E2eTestRunner.None,
+      capacitor: false,
+      skipFormat: false,
+    };
+    const projectRoot = `apps/${schema.name}`;
+    return {
+      host,
+      schema,
+      projectRoot,
+    };
   };
-  const projectRoot = `apps/${options.name}`;
-
-  beforeEach(() => {
-    host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-  });
 
   it('should add dependencies to package.json', async () => {
-    await applicationGenerator(host, options);
+    const { host, schema } = await setup();
+    await applicationGenerator(host, schema);
 
     const packageJson = readJson(host, 'package.json');
     expect(packageJson.dependencies['@ionic/angular']).toBeDefined();
@@ -33,8 +35,10 @@ xdescribe('application schematic', () => {
   });
 
   it('should update assets in project configuration', async () => {
-    await applicationGenerator(host, options);
-    const project = readProjectConfiguration(host, options.name);
+    const { host, schema, projectRoot } = await setup();
+
+    await applicationGenerator(host, schema);
+    const project = readProjectConfiguration(host, schema.name);
 
     const assets = project.targets.build.options.assets;
     const styles = project.targets.build.options.styles;
@@ -59,12 +63,10 @@ xdescribe('application schematic', () => {
 
   describe('--linter', () => {
     it('should update .eslintrc.json', async () => {
-      await applicationGenerator(host, options);
+      const { host, schema } = await setup();
+      await applicationGenerator(host, schema);
 
-      const eslintrcJson = readJson(
-        host,
-        `apps/${options.name}/.eslintrc.json`
-      );
+      const eslintrcJson = readJson(host, `apps/${schema.name}/.eslintrc.json`);
       const tsOverride = eslintrcJson.overrides.find(
         (override: { files: string | string[] }) =>
           override.files.includes('*.ts')
@@ -89,7 +91,8 @@ xdescribe('application schematic', () => {
 
   describe('--template', () => {
     it('should add base template files', async () => {
-      await applicationGenerator(host, options);
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, schema);
 
       expect(host.exists(`${projectRoot}/ionic.config.json`)).toBeTruthy();
 
@@ -107,7 +110,8 @@ xdescribe('application schematic', () => {
     });
 
     it('--blank', async () => {
-      await applicationGenerator(host, { ...options, template: 'blank' });
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, { ...schema, template: 'blank' });
 
       expect(
         host.exists(`${projectRoot}/src/app/home/home.module.ts`)
@@ -115,7 +119,8 @@ xdescribe('application schematic', () => {
     });
 
     it('--list', async () => {
-      await applicationGenerator(host, { ...options, template: 'list' });
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, { ...schema, template: 'list' });
 
       expect(
         host.exists(
@@ -125,7 +130,8 @@ xdescribe('application schematic', () => {
     });
 
     it('--sidemenu', async () => {
-      await applicationGenerator(host, { ...options, template: 'sidemenu' });
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, { ...schema, template: 'sidemenu' });
 
       expect(
         host.exists(`${projectRoot}/src/app/folder/folder.module.ts`)
@@ -133,7 +139,8 @@ xdescribe('application schematic', () => {
     });
 
     it('--tabs', async () => {
-      await applicationGenerator(host, { ...options, template: 'tabs' });
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, { ...schema, template: 'tabs' });
 
       expect(
         host.exists(`${projectRoot}/src/app/tabs/tabs.module.ts`)
@@ -143,11 +150,12 @@ xdescribe('application schematic', () => {
 
   describe('--directory', () => {
     it('should update workspace.json', async () => {
-      await applicationGenerator(host, { ...options, directory: 'myDir' });
-      const project = readProjectConfiguration(host, `my-dir-${options.name}`);
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, { ...schema, directory: 'myDir' });
+      const project = readProjectConfiguration(host, `my-dir-${schema.name}`);
       const projectE2e = readProjectConfiguration(
         host,
-        `my-dir-${options.name}-e2e`
+        `my-dir-${schema.name}-e2e`
       );
 
       expect(project.root).toEqual('apps/my-dir/my-app');
@@ -155,14 +163,16 @@ xdescribe('application schematic', () => {
     });
 
     it('should generate files', async () => {
-      await applicationGenerator(host, { ...options, directory: 'myDir' });
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, { ...schema, directory: 'myDir' });
 
       expect(host.exists('apps/my-dir/my-app/src/main.ts'));
     });
 
     it('should generate Capacitor project', async () => {
+      const { host, schema, projectRoot } = await setup();
       await applicationGenerator(host, {
-        ...options,
+        ...schema,
         directory: 'my-dir',
         capacitor: true,
       });
@@ -175,8 +185,9 @@ xdescribe('application schematic', () => {
 
   describe('--unitTestRunner', () => {
     it('none', async () => {
+      const { host, schema, projectRoot } = await setup();
       await applicationGenerator(host, {
-        ...options,
+        ...schema,
         unitTestRunner: 'none',
       });
 
@@ -187,8 +198,9 @@ xdescribe('application schematic', () => {
     });
 
     it('jest', async () => {
+      const { host, schema, projectRoot } = await setup();
       await applicationGenerator(host, {
-        ...options,
+        ...schema,
         unitTestRunner: 'jest',
       });
 
@@ -198,9 +210,10 @@ xdescribe('application schematic', () => {
 
   describe('--tags', () => {
     it('should update nx.json', async () => {
-      await applicationGenerator(host, { ...options, tags: 'one,two' });
+      const { host, schema, projectRoot } = await setup();
+      await applicationGenerator(host, { ...schema, tags: 'one,two' });
 
-      const projectConfiguration = readProjectConfiguration(host, options.name);
+      const projectConfiguration = readProjectConfiguration(host, schema.name);
       expect(projectConfiguration.tags).toEqual(['one', 'two']);
     });
   });
@@ -208,7 +221,8 @@ xdescribe('application schematic', () => {
   describe('--capacitor', () => {
     describe('true', () => {
       it('should generate Capacitor project', async () => {
-        await applicationGenerator(host, { ...options, capacitor: true });
+        const { host, schema, projectRoot } = await setup();
+        await applicationGenerator(host, { ...schema, capacitor: true });
 
         expect(host.exists(`${projectRoot}/capacitor.config.ts`)).toBeDefined();
       });
diff --git a/packages/ionic-angular/src/generators/application/generator.ts b/packages/ionic-angular/src/generators/application/generator.ts
index 22a67019..1b9e6c5f 100644
--- a/packages/ionic-angular/src/generators/application/generator.ts
+++ b/packages/ionic-angular/src/generators/application/generator.ts
@@ -1,9 +1,4 @@
-import {
-  convertNxGenerator,
-  formatFiles,
-  runTasksInSerial,
-  Tree,
-} from '@nx/devkit';
+import { formatFiles, runTasksInSerial, Tree } from '@nx/devkit';
 import { addAngular } from './lib/add-angular';
 import { addCapacitor } from './lib/add-capacitor';
 import { addDependencies } from './lib/add-dependencies';
@@ -36,4 +31,3 @@ export async function applicationGenerator(
 }
 
 export default applicationGenerator;
-export const applicationSchematic = convertNxGenerator(applicationGenerator);
diff --git a/packages/ionic-angular/src/generators/application/lib/add-dependencies.ts b/packages/ionic-angular/src/generators/application/lib/add-dependencies.ts
index f32397f7..a68274f9 100644
--- a/packages/ionic-angular/src/generators/application/lib/add-dependencies.ts
+++ b/packages/ionic-angular/src/generators/application/lib/add-dependencies.ts
@@ -11,9 +11,11 @@ export function addDependencies(host: Tree) {
     {
       '@ionic/angular': ionicAngularVersion,
       ionicons: ioniconsVersion,
+      '@capacitor/app': capacitorPluginVersion,
       '@capacitor/haptics': capacitorPluginVersion,
       '@capacitor/keyboard': capacitorPluginVersion,
       '@capacitor/status-bar': capacitorPluginVersion,
+      '@capacitor/core': capacitorPluginVersion,
     },
     {}
   );
diff --git a/packages/ionic-angular/src/generators/application/lib/templates.type.ts b/packages/ionic-angular/src/generators/application/lib/templates.type.ts
new file mode 100644
index 00000000..d0e4ba30
--- /dev/null
+++ b/packages/ionic-angular/src/generators/application/lib/templates.type.ts
@@ -0,0 +1,6 @@
+export enum GeneratorTemplate {
+  Blank = 'blank',
+  List = 'list',
+  Sidemenu = 'sidemenu',
+  Tabs = 'tabs',
+}
diff --git a/packages/ionic-angular/src/generators/application/schema.json b/packages/ionic-angular/src/generators/application/schema.json
index b7dde76f..b947cf77 100644
--- a/packages/ionic-angular/src/generators/application/schema.json
+++ b/packages/ionic-angular/src/generators/application/schema.json
@@ -75,7 +75,7 @@
     "standalone": {
       "description": "Create a standalone application.",
       "type": "boolean",
-      "default": false
+      "default": true
     }
   },
   "required": ["name"]
diff --git a/packages/ionic-angular/src/generators/page/generator.ts b/packages/ionic-angular/src/generators/page/generator.ts
index ab59aa1a..53da369a 100644
--- a/packages/ionic-angular/src/generators/page/generator.ts
+++ b/packages/ionic-angular/src/generators/page/generator.ts
@@ -63,4 +63,3 @@ export async function pageGenerator(tree: Tree, options: PageGeneratorSchema) {
 }
 
 export default pageGenerator;
-export const pageSchematic = convertNxGenerator(pageGenerator);
diff --git a/packages/ionic-angular/src/utils/versions.ts b/packages/ionic-angular/src/utils/versions.ts
index 469ff060..35d6728d 100644
--- a/packages/ionic-angular/src/utils/versions.ts
+++ b/packages/ionic-angular/src/utils/versions.ts
@@ -1,3 +1,3 @@
-export const ionicAngularVersion = '^7.0.0';
-export const ioniconsVersion = '^7.0.0';
-export const capacitorPluginVersion = '^5.0.0';
+export const ionicAngularVersion = '^7.5.0';
+export const ioniconsVersion = '^7.2.1';
+export const capacitorPluginVersion = '6.0.0';
diff --git a/packages/ionic-react/package.json b/packages/ionic-react/package.json
index 0e9ee4a0..4af6483d 100644
--- a/packages/ionic-react/package.json
+++ b/packages/ionic-react/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@nxext/ionic-react",
-  "version": "18.0.4",
+  "version": "18.0.0",
   "description": "An Nx plugin for developing Ionic React applications and libraries",
   "author": {
-    "name": "Devin Shoemaker",
-    "email": "devinshoe@gmail.com"
+    "name": "Dominik Pieper",
+    "email": "dominik@pieper.io"
   },
   "homepage": "https://nxext.github.io/nx-extensions-ionic/docs/ionic-react/overview.html",
   "repository": {
@@ -25,7 +25,7 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nxext/capacitor": "^18.0.4",
+    "@nxext/capacitor": "18.0.0",
     "@nx/devkit": "18.3.1",
     "@nx/eslint": "18.3.1",
     "@nx/react": "18.3.1",
@@ -33,5 +33,9 @@
     "@phenomnomnominal/tsquery": "~5.0.1",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/react": "^18.3.0",
+    "@phenomnomnominal/tsquery": "~5.0.1",
+    "@nx/eslint": "^18.3.0"
+  }
 }
diff --git a/packages/ionic-react/src/generators/application/generator.spec.ts b/packages/ionic-react/src/generators/application/generator.spec.ts
index b78d1fa3..8f93ce4f 100644
--- a/packages/ionic-react/src/generators/application/generator.spec.ts
+++ b/packages/ionic-react/src/generators/application/generator.spec.ts
@@ -4,20 +4,30 @@ import { applicationGenerator } from './generator';
 import { ApplicationGeneratorSchema } from './schema';
 
 describe('application', () => {
-  let host: Tree;
-
-  const options: ApplicationGeneratorSchema = {
-    name: 'my-app',
-    unitTestRunner: 'jest',
-    e2eTestRunner: 'cypress',
-    template: 'blank',
-    capacitor: false,
-    skipFormat: true,
+  const setup = async () => {
+    const host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    const options: ApplicationGeneratorSchema = {
+      name: 'my-app',
+      unitTestRunner: 'jest',
+      e2eTestRunner: 'cypress',
+      template: 'blank',
+      capacitor: false,
+      skipFormat: true,
+    };
+    const projectRoot = `apps/${options.name}`;
+
+    return {
+      host,
+      options,
+      projectRoot,
+    };
   };
 
-  const projectRoot = `apps/${options.name}`;
-
-  function testGeneratedFiles(tree: Tree, options: ApplicationGeneratorSchema) {
+  async function testGeneratedFiles(
+    tree: Tree,
+    options: ApplicationGeneratorSchema
+  ) {
+    const { projectRoot } = await setup();
     // Common files
     expect(tree.exists(`${projectRoot}/.eslintrc.json`)).toBeTruthy();
     expect(tree.exists(`${projectRoot}/src/index.html`)).toBeTruthy();
@@ -44,11 +54,8 @@ describe('application', () => {
     }
   }
 
-  beforeEach(() => {
-    host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-  });
-
   it('should add dependencies to package.json', async () => {
+    const { host, options } = await setup();
     await applicationGenerator(host, options);
 
     const packageJson = readJson(host, 'package.json');
@@ -58,12 +65,14 @@ describe('application', () => {
   });
 
   it('should generate application', async () => {
+    const { host, options } = await setup();
     await applicationGenerator(host, options);
 
-    testGeneratedFiles(host, { ...options });
+    await testGeneratedFiles(host, { ...options });
   });
 
   it('should delete unused @nx/react files', async () => {
+    const { host, options, projectRoot } = await setup();
     await applicationGenerator(host, options);
 
     expect(host.exists(`${projectRoot}/src/app/app.css`)).toBeFalsy();
@@ -71,6 +80,7 @@ describe('application', () => {
   });
 
   it('should update assets in project configuration', async () => {
+    const { host, options, projectRoot } = await setup();
     await applicationGenerator(host, options);
     const project = readProjectConfiguration(host, options.name);
 
@@ -84,6 +94,7 @@ describe('application', () => {
 
   describe('--template', () => {
     it('should add base template files', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, options);
 
       expect(host.exists(`${projectRoot}/ionic.config.json`)).toBeTruthy();
@@ -93,6 +104,7 @@ describe('application', () => {
     });
 
     it('should add blank template files', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, { ...options, template: 'blank' });
 
       expect(
@@ -101,6 +113,7 @@ describe('application', () => {
     });
 
     it('should add list template files', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, { ...options, template: 'list' });
 
       expect(
@@ -109,12 +122,14 @@ describe('application', () => {
     });
 
     it('should add sidemenu template files', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, { ...options, template: 'sidemenu' });
 
       expect(host.exists(`${projectRoot}/src/pages/Page.tsx`)).toBeTruthy();
     });
 
     it('should add tabs template files', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, { ...options, template: 'tabs' });
 
       expect(host.exists(`${projectRoot}/src/pages/Tab1.tsx`)).toBeTruthy();
@@ -123,6 +138,7 @@ describe('application', () => {
 
   describe('--directory', () => {
     it('should update project configuration with directory', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, { ...options, directory: 'myDir' });
       const project = readProjectConfiguration(host, `my-dir-${options.name}`);
       const projectE2e = readProjectConfiguration(
@@ -135,12 +151,14 @@ describe('application', () => {
     });
 
     it('should generate files', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, { ...options, directory: 'myDir' });
 
       expect(host.exists('apps/my-dir/my-app/src/main.ts'));
     });
 
     it('should generate Capacitor project', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, {
         ...options,
         directory: 'my-dir',
@@ -155,6 +173,7 @@ describe('application', () => {
 
   describe('--unitTestRunner', () => {
     it('none', async () => {
+      const { host, options, projectRoot } = await setup();
       await applicationGenerator(host, {
         ...options,
         unitTestRunner: 'none',
@@ -167,9 +186,10 @@ describe('application', () => {
   describe('--capacitor', () => {
     describe('true', () => {
       it('should generate Capacitor project', async () => {
+        const { host, options, projectRoot } = await setup();
         await applicationGenerator(host, { ...options, capacitor: true });
 
-        testGeneratedFiles(host, { ...options, capacitor: true });
+        await testGeneratedFiles(host, { ...options, capacitor: true });
       });
     });
   });
@@ -177,6 +197,7 @@ describe('application', () => {
   describe('--standaloneConfig', () => {
     describe('true', () => {
       it('should generate package.json', async () => {
+        const { host, options, projectRoot } = await setup();
         await applicationGenerator(host, {
           ...options,
           standaloneConfig: true,
@@ -188,6 +209,7 @@ describe('application', () => {
 
     describe('false', () => {
       it('should not generate package.json', async () => {
+        const { host, options, projectRoot } = await setup();
         await applicationGenerator(host, {
           ...options,
           standaloneConfig: false,
diff --git a/packages/ionic-react/src/generators/application/lib/add-dependencies.ts b/packages/ionic-react/src/generators/application/lib/add-dependencies.ts
index 0846e513..623ef58f 100644
--- a/packages/ionic-react/src/generators/application/lib/add-dependencies.ts
+++ b/packages/ionic-react/src/generators/application/lib/add-dependencies.ts
@@ -5,6 +5,7 @@ import {
   webVitalsVersion,
   workboxVersion,
   capacitorPluginVersion,
+  ioniconsVersion,
 } from '../../../utils/versions';
 
 export function addDependencies(host: Tree) {
@@ -14,9 +15,12 @@ export function addDependencies(host: Tree) {
       '@ionic/react': ionicReactVersion,
       '@ionic/react-router': ionicReactRouterVersion,
       'web-vitals': webVitalsVersion,
+      ionicons: ioniconsVersion,
+      '@capacitor/app': capacitorPluginVersion,
       '@capacitor/haptics': capacitorPluginVersion,
       '@capacitor/keyboard': capacitorPluginVersion,
       '@capacitor/status-bar': capacitorPluginVersion,
+      '@capacitor/core': capacitorPluginVersion,
       'workbox-background-sync': workboxVersion,
       'workbox-broadcast-update': workboxVersion,
       'workbox-cacheable-response': workboxVersion,
diff --git a/packages/ionic-react/src/generators/application/lib/add-react.ts b/packages/ionic-react/src/generators/application/lib/add-react.ts
index 6d419d7f..65925ede 100644
--- a/packages/ionic-react/src/generators/application/lib/add-react.ts
+++ b/packages/ionic-react/src/generators/application/lib/add-react.ts
@@ -6,8 +6,7 @@ export async function addReact(
   host: Tree,
   options: ApplicationGeneratorSchema
 ) {
-  ensurePackage('@nx/react', NX_VERSION);
-  const { applicationGenerator } = await import('@nx/react');
+  const { applicationGenerator } = ensurePackage('@nx/react', NX_VERSION);
   return await applicationGenerator(host, {
     ...options,
     name: options.name,
diff --git a/packages/ionic-react/src/utils/versions.ts b/packages/ionic-react/src/utils/versions.ts
index e71544f7..ad2f4acd 100644
--- a/packages/ionic-react/src/utils/versions.ts
+++ b/packages/ionic-react/src/utils/versions.ts
@@ -5,3 +5,4 @@ export const workboxVersion = '^5.1.4';
 export const reactRouterDomVersion = '5.3.3';
 export const typesReactRouterDomVersion = '5.3.3';
 export const capacitorPluginVersion = '5.0.2';
+export const ioniconsVersion = '^7.2.1';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c68df804..4f505c54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,6 +67,9 @@ devDependencies:
   '@nx/web':
     specifier: 18.3.1
     version: 18.3.1(@swc-node/register@1.8.0)(@swc/core@1.4.15)(@types/node@18.19.18)(nx@18.3.1)(typescript@5.4.5)(verdaccio@5.29.2)
+  '@nx/webpack':
+    specifier: 18.3.1
+    version: 18.3.1(@swc-node/register@1.8.0)(@swc/core@1.4.15)(@types/node@18.19.18)(nx@18.3.1)(typescript@5.4.5)(verdaccio@5.29.2)
   '@nx/workspace':
     specifier: 18.3.1
     version: 18.3.1(@swc-node/register@1.8.0)(@swc/core@1.4.15)
@@ -11555,7 +11558,7 @@ packages:
       lodash.isstring: 4.0.1
       lodash.once: 4.1.1
       ms: 2.1.3
-      semver: 7.5.4
+      semver: 7.6.0
     dev: true
 
   /jsprim@2.0.2:
diff --git a/tools/scripts/create-playground.ts b/tools/scripts/create-playground.ts
index 3e006827..d0d444f3 100644
--- a/tools/scripts/create-playground.ts
+++ b/tools/scripts/create-playground.ts
@@ -7,15 +7,20 @@ import {
 } from 'fs-extra';
 import { getPublishableLibNames, tmpProjPath } from './utils';
 import { dirname, basename } from 'path';
-import { logger, readJsonFile, workspaceRoot } from '@nx/devkit';
-import { Workspaces } from 'nx/src/config/workspaces';
+import {
+  logger,
+  readCachedProjectGraph,
+  readJsonFile,
+  readProjectsConfigurationFromProjectGraph,
+  workspaceRoot,
+} from '@nx/devkit';
 import * as glob from 'glob';
 
 console.log('\nCreating playground. This may take a few minutes.');
 
-const workspaceJson = new Workspaces(
-  workspaceRoot
-).readWorkspaceConfiguration();
+const workspaceJson = readProjectsConfigurationFromProjectGraph(
+  readCachedProjectGraph()
+);
 const publishableLibNames = getPublishableLibNames(workspaceJson);
 
 execSync(`npx nx run-many --target build --projects ${publishableLibNames}`);
@@ -29,9 +34,11 @@ const baseName = basename(tmpProjPath());
 
 logger.info('Creating nx workspace...');
 execSync(
-  `pnpx create-nx-workspace --preset=apps --name=${baseName} --skipGit=true --packageManager=pnpm --nxCloud=false`,
+  `npx --yes create-nx-workspace@latest ${baseName} --preset empty --nxCloud skip --no-interactive`,
   {
     cwd: localTmpDir,
+    stdio: 'inherit',
+    env: process.env,
   }
 );
 logger.info('Nx workspace created!');
diff --git a/tools/scripts/fetch-latest-versions.ts b/tools/scripts/fetch-latest-versions.ts
index b780bab5..830b4ce8 100644
--- a/tools/scripts/fetch-latest-versions.ts
+++ b/tools/scripts/fetch-latest-versions.ts
@@ -1,135 +1,5 @@
 import { spawnSync } from 'child_process';
-import {
-  ionicVersion,
-  puppeteer,
-  STENCIL_OUTPUTTARGET_VERSION,
-  STENCIL_STYLE_PLUGIN_VERSION,
-  stencilRouterVersion,
-  stencilVersion,
-} from '../../packages/stencil/src/utils/versions';
-import {
-  eslintPluginSvelteVersion,
-  svelteCheckVersion,
-  svelteJesterVersion,
-  svelteLoaderVersion,
-  sveltePreprocessVersion,
-  svelteVersion,
-  testingLibrarySvelteVersion,
-  tsconfigSvelteVersion,
-  vitePluginSvelteVersion,
-} from '../../packages/svelte/src/generators/utils/versions';
-import {
-  eslintPluginSolidVersion,
-  solidJestVersion,
-  solidTestingLibraryVersion,
-  solidVersion,
-  vitePluginSolidVersion,
-} from '../../packages/solid/src/generators/utils/versions';
-import {
-  eslintPluginPreactVersion,
-  preactVersion,
-  testingLibraryPreactVersion,
-  vitePluginPreactVersion,
-} from '../../packages/preact/src/generators/utils/versions';
 import { capacitorVersion } from '../../packages/capacitor/src/utils/versions';
-import {
-  vueRouterVersion,
-  vueTestUtilsVersion,
-  vueTscVersion,
-  vueVersion,
-  vitePluginVueVersion,
-  eslintPluginVueVersion,
-  eslintPluginPrettierVueVersion,
-  eslintPluginTypescriptVueVersion,
-} from '../../packages/vue/src/generators/utils/versions';
-
-console.log('======================================');
-console.log('Stencil:');
-console.log('======================================');
-
-const stencilpkgs = [
-  { pkg: '@stencil/core', version: stencilVersion },
-  { pkg: '@stencil/sass', version: STENCIL_STYLE_PLUGIN_VERSION['scss'] },
-  { pkg: '@stencil/less', version: STENCIL_STYLE_PLUGIN_VERSION['less'] },
-  { pkg: '@stencil/postcss', version: STENCIL_STYLE_PLUGIN_VERSION['pcss'] },
-  { pkg: '@stencil/stylus', version: STENCIL_STYLE_PLUGIN_VERSION['styl'] },
-  { pkg: '@ionic/core', version: ionicVersion },
-  { pkg: '@stencil/router', version: stencilRouterVersion },
-
-  {
-    pkg: '@stencil/react-output-target',
-    version: STENCIL_OUTPUTTARGET_VERSION['react'],
-  },
-  {
-    pkg: '@stencil/vue-output-target',
-    version: STENCIL_OUTPUTTARGET_VERSION['vue'],
-  },
-  {
-    pkg: '@stencil/angular-output-target',
-    version: STENCIL_OUTPUTTARGET_VERSION['angular'],
-  },
-  {
-    pkg: '@stencil/svelte-output-target',
-    version: STENCIL_OUTPUTTARGET_VERSION['svelte'],
-  },
-
-  { pkg: 'puppeteer', version: puppeteer },
-];
-
-stencilpkgs.forEach(({ pkg, version }) => {
-  checkVersion(pkg, version);
-});
-
-console.log('======================================');
-console.log('Svelte:');
-console.log('======================================');
-
-const sveltepkgs = [
-  { pkg: 'svelte-jester', version: svelteJesterVersion },
-  { pkg: 'svelte', version: svelteVersion },
-  { pkg: 'svelte-check', version: svelteCheckVersion },
-  { pkg: 'svelte-preprocess', version: sveltePreprocessVersion },
-  { pkg: '@tsconfig/svelte', version: tsconfigSvelteVersion },
-  { pkg: '@testing-library/svelte', version: testingLibrarySvelteVersion },
-  { pkg: '@sveltejs/vite-plugin-svelte', version: vitePluginSvelteVersion },
-  { pkg: 'eslint-plugin-svelte3', version: eslintPluginSvelteVersion },
-  { pkg: 'svelte-loader', version: svelteLoaderVersion },
-];
-
-sveltepkgs.forEach(({ pkg, version }) => {
-  checkVersion(pkg, version);
-});
-
-console.log('======================================');
-console.log('Preact:');
-console.log('======================================');
-
-const preactPkgs = [
-  { pkg: 'preact', version: preactVersion },
-  { pkg: '@testing-library/preact', version: testingLibraryPreactVersion },
-  { pkg: '@preact/preset-vite', version: vitePluginPreactVersion },
-  { pkg: 'eslint-plugin-preact', version: eslintPluginPreactVersion },
-];
-
-preactPkgs.forEach(({ pkg, version }) => {
-  checkVersion(pkg, version);
-});
-
-console.log('======================================');
-console.log('Solid:');
-console.log('======================================');
-
-const solidPkgs = [
-  { pkg: 'solid-jest', version: solidJestVersion },
-  { pkg: 'solid-js', version: solidVersion },
-  { pkg: 'solid-testing-library', version: solidTestingLibraryVersion },
-  { pkg: 'eslint-plugin-solid', version: eslintPluginSolidVersion },
-  { pkg: 'vite-plugin-solid', version: vitePluginSolidVersion },
-];
-
-solidPkgs.forEach(({ pkg, version }) => {
-  checkVersion(pkg, version);
-});
 
 console.log('======================================');
 console.log('Capacitor:');
@@ -146,32 +16,6 @@ capacitorPkgs.forEach(({ pkg, version }) => {
   checkVersion(pkg, version);
 });
 
-console.log('======================================');
-console.log('Vue:');
-console.log('======================================');
-
-const vuePkgs = [
-  { pkg: 'vue-router', version: vueRouterVersion },
-  { pkg: '@vue/test-utils', version: vueTestUtilsVersion },
-  { pkg: 'vue-tsc', version: vueTscVersion },
-  { pkg: 'vue', version: vueVersion },
-  { pkg: '@vitejs/plugin-vue', version: vitePluginVueVersion },
-
-  { pkg: 'eslint-plugin-vue', version: eslintPluginVueVersion },
-  {
-    pkg: '@vue/eslint-config-prettier',
-    version: eslintPluginPrettierVueVersion,
-  },
-  {
-    pkg: '@vue/eslint-config-typescript',
-    version: eslintPluginTypescriptVueVersion,
-  },
-];
-
-vuePkgs.forEach(({ pkg, version }) => {
-  checkVersion(pkg, version);
-});
-
 function checkVersion(pkg: string, version: string = '') {
   const show = spawnSync(`npm`, ['show', pkg, 'version']);
   const currentVersion = show.stdout
diff --git a/tools/scripts/update-playground.ts b/tools/scripts/update-playground.ts
index 927687da..c600d32f 100644
--- a/tools/scripts/update-playground.ts
+++ b/tools/scripts/update-playground.ts
@@ -2,15 +2,20 @@
 import { execSync } from 'child_process';
 import { readFileSync, removeSync, writeFileSync } from 'fs-extra';
 import { copyAndRename, getPublishableLibNames, tmpProjPath } from './utils';
-import { Workspaces } from 'nx/src/config/workspaces';
-import { logger, readJsonFile, workspaceRoot } from '@nx/devkit';
+import {
+  logger,
+  readCachedProjectGraph,
+  readJsonFile,
+  readProjectsConfigurationFromProjectGraph,
+  workspaceRoot,
+} from '@nx/devkit';
 import * as glob from 'glob';
 
 console.log('\nUpdating playground...');
 
-const workspaceJson = new Workspaces(
-  workspaceRoot
-).readWorkspaceConfiguration();
+const workspaceJson = readProjectsConfigurationFromProjectGraph(
+  readCachedProjectGraph()
+);
 
 const publishableLibNames = getPublishableLibNames(workspaceJson);
 
diff --git a/tools/scripts/utils.ts b/tools/scripts/utils.ts
index c490a74d..0db4dbaa 100644
--- a/tools/scripts/utils.ts
+++ b/tools/scripts/utils.ts
@@ -1,9 +1,15 @@
 import { existsSync, lstatSync, copySync, renameSync } from 'fs-extra';
-import { workspaceRoot } from '@nx/devkit';
-import { Workspaces } from 'nx/src/config/workspaces';
+import {
+  readCachedProjectGraph,
+  readProjectsConfigurationFromProjectGraph,
+} from '@nx/devkit';
+
+readCachedProjectGraph();
 
 export function getPublishableLibNames(
-  workspaceJson = new Workspaces(workspaceRoot).readWorkspaceConfiguration()
+  workspaceJson = readProjectsConfigurationFromProjectGraph(
+    readCachedProjectGraph()
+  )
 ) {
   const { projects } = workspaceJson;