From d0764978b77e826d6fb41aae8d3b1dc43cf1878f Mon Sep 17 00:00:00 2001
From: OS-jacobbell <228905018+OS-jacobbell@users.noreply.github.com>
Date: Thu, 9 Jul 2026 10:49:41 -0600
Subject: [PATCH 1/2] docs(angular): document standalone and lazy import path
 changes

---
 docs/angular/add-to-existing.md               |  8 +-
 docs/angular/build-options.md                 | 74 +++++++++----------
 docs/angular/injection-tokens.md              |  8 +-
 docs/angular/platform.md                      |  6 +-
 docs/angular/quickstart.md                    | 12 +--
 docs/angular/slides.md                        |  4 +-
 docs/angular/virtual-scroll.md                |  2 +-
 docs/angular/your-first-app.md                |  2 +-
 docs/angular/zoneless.md                      |  2 +-
 docs/api/item.md                              |  4 +-
 docs/developing/config.md                     |  8 +-
 docs/developing/config/global/index.md        |  4 +-
 docs/developing/config/per-component/index.md |  4 +-
 .../config/per-platform-fallback/index.md     |  4 +-
 .../config/per-platform-overrides/index.md    |  4 +-
 docs/developing/config/per-platform/index.md  |  4 +-
 docs/developing/hardware-back-button.md       | 12 +--
 docs/developing/keyboard.md                   |  4 +-
 docs/developing/managing-focus.md             |  4 +-
 docs/techniques/security.md                   |  4 +-
 docs/updating/9-0.md                          |  5 +-
 docs/utilities/animations.md                  |  4 +-
 docs/utilities/gestures.md                    |  4 +-
 23 files changed, 95 insertions(+), 92 deletions(-)

diff --git a/docs/angular/add-to-existing.md b/docs/angular/add-to-existing.md
index 7d65df43882..8a551abfd4e 100644
--- a/docs/angular/add-to-existing.md
+++ b/docs/angular/add-to-existing.md
@@ -89,7 +89,7 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import { provideIonicAngular } from '@ionic/angular/standalone';
+import { provideIonicAngular } from '@ionic/angular';
 
 export const appConfig: ApplicationConfig = {
   providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes), provideIonicAngular({})],
@@ -112,7 +112,7 @@ Then, import the components in `src/app/app.ts`:
 
 ```ts title="src/app/app.ts"
 import { Component } from '@angular/core';
-import { IonButton, IonDatetime } from '@ionic/angular/standalone';
+import { IonButton, IonDatetime } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
@@ -207,7 +207,7 @@ Then, update `src/app/app.ts` to include the component imports:
 
 ```ts title="src/app/app.ts"
 import { Component } from '@angular/core';
-import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { IonApp, IonRouterOutlet } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
@@ -250,7 +250,7 @@ Then, create `src/app/home/home.ts` with the following:
 
 ```ts title="src/app/home/home.ts"
 import { Component } from '@angular/core';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
 
 @Component({
   selector: 'app-home',
diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md
index 630864d1621..928fa8c42e1 100644
--- a/docs/angular/build-options.md
+++ b/docs/angular/build-options.md
@@ -32,7 +32,7 @@ See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for
 ### Usage with Standalone-based Applications
 
 :::warning
-All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
+All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking.
 :::
 
 **Bootstrapping and Configuration**
@@ -43,7 +43,7 @@ Ionic Angular needs to be configured when the Angular application calls `bootstr
 import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter } from '@angular/router';
-import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
@@ -59,11 +59,11 @@ bootstrapApplication(AppComponent, {
 
 **Components**
 
-In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
+In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
 
 ```typescript title="home.page.ts"
 import { Component } from '@angular/core';
-import { IonButton, IonContent } from '@ionic/angular/standalone';
+import { IonButton, IonContent } from '@ionic/angular';
 
 @Component({
   selector: 'app-home',
@@ -87,7 +87,7 @@ For developers using Ionicons 7.2 or newer, passing only the SVG data will cause
 
 ```typescript title="home.page.ts"
 import { Component } from '@angular/core';
-import { IonIcon } from '@ionic/angular/standalone';
+import { IonIcon } from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { logoIonic } from 'ionicons/icons';
 
@@ -153,7 +153,7 @@ Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on
 ```typescript title="home.page.ts"
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+import { IonButton, IonRouterLink } from '@ionic/angular';
 
 @Component({
   selector: 'app-home',
@@ -199,7 +199,7 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us
 ### Usage with NgModule-based Applications
 
 :::warning
-All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
+All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking.
 :::
 
 **Bootstrapping and Configuration**
@@ -211,7 +211,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
-import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -227,11 +227,11 @@ export class AppModule {}
 
 **Components**
 
-In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
+In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
 
 ```typescript title="home.module.ts"
 import { NgModule } from '@angular/core';
-import { IonButton, IonContent } from '@ionic/angular/standalone';
+import { IonButton, IonContent } from '@ionic/angular';
 import { HomePage } from './home.page';
 
 import { HomePageRoutingModule } from './home-routing.module';
@@ -315,7 +315,7 @@ Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on
 ```typescript title="home.module.ts"
 import { NgModule } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+import { IonButton, IonRouterLink } from '@ionic/angular';
 import { HomePage } from './home.page';
 
 import { HomePageRoutingModule } from './home-routing.module';
@@ -416,14 +416,14 @@ Follow these steps if your Angular application is already using the standalone a
 
 2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components.
 
-3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function.
+3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function.
 
 ```diff title="main.ts"
 import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter } from '@angular/router';
-- import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-+ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+- import { IonicModule, IonicRouteStrategy } from '@ionic/angular/lazy';
++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
@@ -446,18 +446,18 @@ bootstrapApplication(AppComponent, {
 
 4. Remove any references to `IonicModule` found elsewhere in your application.
 
-5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead.
+5. Update any existing imports from `@ionic/angular/lazy` to import from `@ionic/angular` instead.
 
 ```diff
-- import { Platform } from '@ionic/angular';
-+ import { Platform } from '@ionic/angular/standalone';
+- import { Platform } from '@ionic/angular/lazy';
++ import { Platform } from '@ionic/angular';
 ```
 
 6. Add imports for each Ionic component in the Angular component where they are used. Be sure to pass the imports to the `imports` array on your Angular component.
 
 ```diff title="app.component.ts"
 import { Component } from '@angular/core';
-+ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
++ import { IonApp, IonRouterOutlet } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
@@ -475,7 +475,7 @@ export class AppComponent {
 
 ```diff title="test.component.ts"
 import { Component } from '@angular/core';
-+ import { IonIcon } from '@ionic/angular/standalone';
++ import { IonIcon } from '@ionic/angular';
 + import { addIcons } from 'ionicons';
 + import { alarm, logoIonic } from 'ionicons/icons';
 
@@ -507,8 +507,8 @@ export class TestComponent {
 
 ```diff title="test.component.ts"
 import { Component } from '@angular/core';
-- import { IonButton } from '@ionic/angular/standalone';
-+ import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+- import { IonButton } from '@ionic/angular';
++ import { IonButton, IonRouterLink } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
@@ -523,11 +523,11 @@ import { Component } from '@angular/core';
 export class TestComponent {}
 ```
 
-10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations.
+10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular/lazy` module specifiers for import recommendations.
 
 ```json title=".vscode/settings.json"
 {
-  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
+  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/lazy"]
 }
 ```
 
@@ -539,14 +539,14 @@ Follow these steps if your Angular application is still using the NgModule archi
 
 2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components.
 
-3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function.
+3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function.
 
 ```diff title="app.module.ts"
 import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter } from '@angular/router';
-- import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-+ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+- import { IonicModule, IonicRouteStrategy } from '@ionic/angular/lazy';
++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
@@ -572,11 +572,11 @@ export class AppModule {}
 
 4. Remove any references to `IonicModule` found elsewhere in your application.
 
-5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead.
+5. Update any existing imports from `@ionic/angular/lazy` to import from `@ionic/angular` instead.
 
 ```diff
-- import { Platform } from '@ionic/angular';
-+ import { Platform } from '@ionic/angular/standalone';
+- import { Platform } from '@ionic/angular/lazy';
++ import { Platform } from '@ionic/angular';
 ```
 
 6. Add imports for each Ionic component in the NgModule for the Angular component where they are used. Be sure to pass the components to the `imports` array on the module.
@@ -585,8 +585,8 @@ export class AppModule {}
 import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter } from '@angular/router';
-- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
-+ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular';
++ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
@@ -614,7 +614,7 @@ import { HomePage } from './home.page';
 
 import { HomePageRoutingModule } from './home-routing.module';
 
-+ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
++ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
 
 @NgModule({
   imports: [
@@ -653,7 +653,7 @@ export class TestComponent {
 ```diff title="test.module.ts"
 import { NgModule } from '@angular/core';
 import { TestComponent } from './test.component';
-+ import { IonIcon } from '@ionic/angular/standalone';
++ import { IonIcon } from '@ionic/angular';
 
 @NgModule({
   imports: [
@@ -679,8 +679,8 @@ export class TestComponentModule {}
 ```diff title="test.module.ts"
 import { NgModule } from '@angular/core';
 import { TestComponent } from './test.component';
-- import { IonButton } from '@ionic/angular/standalone';
-+ import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
+- import { IonButton } from '@ionic/angular';
++ import { IonButton, IonRouterLink } from '@ionic/angular';
 
 @NgModule({
   imports: [
@@ -691,10 +691,10 @@ import { TestComponent } from './test.component';
 })
 ```
 
-10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations.
+10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular/lazy` module specifiers for import recommendations.
 
 ```json title=".vscode/settings.json"
 {
-  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
+  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/lazy"]
 }
 ```
diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.md
index c7c775fd69c..2367036ab74 100644
--- a/docs/angular/injection-tokens.md
+++ b/docs/angular/injection-tokens.md
@@ -34,7 +34,7 @@ To use the `IonModalToken`, inject it into your component's constructor:
 
 ```tsx
 import { Component, inject } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal',
@@ -66,7 +66,7 @@ You can use the injected modal reference to listen to modal lifecycle events:
 
 ```tsx
 import { Component, inject, OnInit } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal',
@@ -108,7 +108,7 @@ The injected modal reference provides access to all modal properties and methods
 
 ```tsx
 import { Component, inject, OnInit } from '@angular/core';
-import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular';
 
 @Component({
   selector: 'app-modal',
@@ -149,7 +149,7 @@ When opening a modal that uses the injection token, you can pass the component d
 
 ```tsx
 import { Component, inject } from '@angular/core';
-import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone';
+import { IonContent, IonButton, ModalController } from '@ionic/angular';
 import { ModalComponent } from './modal.component';
 
 @Component({
diff --git a/docs/angular/platform.md b/docs/angular/platform.md
index 3cd0d7833f3..6b4644e01e0 100644
--- a/docs/angular/platform.md
+++ b/docs/angular/platform.md
@@ -28,7 +28,7 @@ The Platform service can be used to get information about your current device. Y
 <TabItem value="angular">
 
 ```tsx
-import { Platform } from '@ionic/angular';
+import { Platform } from '@ionic/angular/lazy';
 
 @Component({...})
 export class MyPage {
@@ -42,7 +42,7 @@ export class MyPage {
 <TabItem value="angular-standalone">
 
 ```tsx
-import { Platform } from '@ionic/angular/standalone';
+import { Platform } from '@ionic/angular';
 
 @Component({...})
 export class MyPage {
@@ -96,7 +96,7 @@ Below is a table listing all the possible platform values along with correspondi
 The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean.
 
 ```tsx
-import { IonicModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular/lazy';
 
 @NgModule({
   ...
diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.md
index e2d7b1436f0..cc2a65f67b1 100644
--- a/docs/angular/quickstart.md
+++ b/docs/angular/quickstart.md
@@ -83,7 +83,7 @@ The root of your app is defined in `app.component.ts`:
 
 ```ts title="src/app/app.component.ts"
 import { Component } from '@angular/core';
-import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
+import { IonApp, IonRouterOutlet } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
@@ -133,7 +133,7 @@ The Home page component, defined in `home.page.ts`, imports the Ionic components
 
 ```ts title="src/app/home/home.page.ts"
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular';
 
 @Component({
   selector: 'app-home',
@@ -193,7 +193,7 @@ You can enhance your Home page with more Ionic UI components. For example, add a
 Then, import the `IonButton` component in `home.page.ts`:
 
 ```ts title="src/app/home/home.page.ts"
-import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
 
 @Component({
   // ...existing config...
@@ -227,7 +227,7 @@ In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the
 And import `IonBackButton` and `IonButtons` in `new.page.ts`:
 
 ```ts title="src/app/new/new.page.ts"
-import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
 
 @Component({
   // ...existing config...
@@ -277,7 +277,7 @@ You'll also need to import and register these icons in `new.page.ts`:
 
 ```ts title="src/app/new/new.page.ts"
 // ...existing imports...
-import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { heart, logoIonic } from 'ionicons/icons';
 
@@ -346,7 +346,7 @@ import {
   IonLabel,
   IonTitle,
   IonToolbar,
-} from '@ionic/angular/standalone';
+} from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { heart, logoIonic } from 'ionicons/icons';
 
diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index 836b717114a..09499318950 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -155,7 +155,7 @@ We can install the `IonicSlides` module by importing and passing it to the `modu
 ```typescript
 // home.page.ts
 
-import { IonicSlides } from '@ionic/angular';
+import { IonicSlides } from '@ionic/angular/lazy';
 
 @Component({
   ...
@@ -171,7 +171,7 @@ export class HomePage {
 ```typescript
 // home.page.ts
 
-import { IonicSlides } from '@ionic/angular/standalone';
+import { IonicSlides } from '@ionic/angular';
 
 @Component({
   ...
diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md
index a95abe2c747..ac9068c24bd 100644
--- a/docs/angular/virtual-scroll.md
+++ b/docs/angular/virtual-scroll.md
@@ -19,7 +19,7 @@ This provides a collection of different utilities, but we'll focus on `Scrolling
 When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file.
 
 ```diff
-  import { IonicModule } from '@ionic/angular';
+  import { IonicModule } from '@ionic/angular/lazy';
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { FormsModule } from '@angular/forms';
diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md
index 896e0de6c72..cdadf1eb9db 100644
--- a/docs/angular/your-first-app.md
+++ b/docs/angular/your-first-app.md
@@ -111,7 +111,7 @@ Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
 ```ts
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
-import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/lazy';
 // CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
diff --git a/docs/angular/zoneless.md b/docs/angular/zoneless.md
index 0bfa0d1cdb0..98e77d90b8f 100644
--- a/docs/angular/zoneless.md
+++ b/docs/angular/zoneless.md
@@ -47,7 +47,7 @@ Writing a signal that a template reads schedules change detection automatically,
 
 ```ts
 import { Component, inject, signal } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular';
 import { PickerModal } from './picker.modal';
 
 @Component({
diff --git a/docs/api/item.md b/docs/api/item.md
index 7b598d3487c..1f88e066b4c 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -180,7 +180,7 @@ Items support client-side navigation using the `routerLink` property. Setting `r
 
 <TabItem value="angular">
 
-In Angular, `routerLink` is a directive provided by `@angular/router`. When used on Ionic components, also import `IonRouterLink` from `@ionic/angular/standalone` to enable `routerDirection` and `routerAnimation` support.
+In Angular, `routerLink` is a directive provided by `@angular/router`. When used on Ionic components, also import `IonRouterLink` from `@ionic/angular` to enable `routerDirection` and `routerAnimation` support.
 
 ```html
 <ion-list>
@@ -195,7 +195,7 @@ In Angular, `routerLink` is a directive provided by `@angular/router`. When used
 
 ```typescript
 import { Component } from '@angular/core';
-import { IonItem, IonLabel, IonList, IonRouterLink } from '@ionic/angular/standalone';
+import { IonItem, IonLabel, IonList, IonRouterLink } from '@ionic/angular';
 import { RouterLink } from '@angular/router';
 
 @Component({
diff --git a/docs/developing/config.md b/docs/developing/config.md
index 494c55d64cb..80f448e6c2d 100644
--- a/docs/developing/config.md
+++ b/docs/developing/config.md
@@ -83,7 +83,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
 <TabItem value="angular">
 
 ```ts
-import { Config } from '@ionic/angular';
+import { Config } from '@ionic/angular/lazy';
 
 @Component(...)
 class AppComponent {
@@ -97,7 +97,7 @@ class AppComponent {
 <TabItem value="angular-standalone">
 
 ```ts
-import { Config } from '@ionic/angular/standalone';
+import { Config } from '@ionic/angular';
 
 @Component(...)
 class AppComponent {
@@ -130,7 +130,7 @@ class AppComponent {
 <TabItem value="angular">
 
 ```ts
-import { Config } from '@ionic/angular';
+import { Config } from '@ionic/angular/lazy';
 
 @Component(...)
 class AppComponent {
@@ -144,7 +144,7 @@ class AppComponent {
 <TabItem value="angular-standalone">
 
 ```ts
-import { Config } from '@ionic/angular/standalone';
+import { Config } from '@ionic/angular';
 
 @Component(...)
 class AppComponent {
diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md
index 19d3494dd66..c4399f29670 100644
--- a/docs/developing/config/global/index.md
+++ b/docs/developing/config/global/index.md
@@ -27,7 +27,7 @@ window.Ionic = {
 <TabItem value="angular">
 
 ```tsx title="app.module.ts"
-import { IonicModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular/lazy';
 
 @NgModule({
   ...
@@ -45,7 +45,7 @@ import { IonicModule } from '@ionic/angular';
 <TabItem value="angular-standalone">
 
 ```ts title="main.ts"
-import { provideIonicAngular } from '@ionic/angular/standalone';
+import { provideIonicAngular } from '@ionic/angular';
 
 bootstrapApplication(AppComponent, {
   providers: [
diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md
index 83546ca0cd7..ed5e82c7094 100644
--- a/docs/developing/config/per-component/index.md
+++ b/docs/developing/config/per-component/index.md
@@ -47,7 +47,7 @@ window.Ionic = {
 **Not recommended**
 
 ```ts
-import { IonicModule } from '@ionic/angular';
+import { IonicModule } from '@ionic/angular/lazy';
 
 @NgModule({
   ...
@@ -84,7 +84,7 @@ class MyComponent {
 **Not recommended**
 
 ```ts
-import { provideIonicAngular } from '@ionic/angular/standalone';
+import { provideIonicAngular } from '@ionic/angular';
 
 bootstrapApplication(AppComponent, {
   providers: [
diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md
index a3bbd7fa45a..fe9f0736957 100644
--- a/docs/developing/config/per-platform-fallback/index.md
+++ b/docs/developing/config/per-platform-fallback/index.md
@@ -14,7 +14,7 @@ import TabItem from '@theme/TabItem';
 <TabItem value="angular">
 
 ```ts title="app.module.ts"
-import { isPlatform, IonicModule } from '@ionic/angular';
+import { isPlatform, IonicModule } from '@ionic/angular/lazy';
 
 const getConfig = () => {
   if (isPlatform('hybrid')) {
@@ -40,7 +40,7 @@ const getConfig = () => {
 <TabItem value="angular-standalone">
 
 ```ts title="main.ts"
-import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';
+import { isPlatform, provideIonicAngular } from '@ionic/angular';
 
 const getConfig = () => {
   if (isPlatform('hybrid')) {
diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md
index 6ee558f9e41..2aaf3db5c1f 100644
--- a/docs/developing/config/per-platform-overrides/index.md
+++ b/docs/developing/config/per-platform-overrides/index.md
@@ -14,7 +14,7 @@ import TabItem from '@theme/TabItem';
 <TabItem value="angular">
 
 ```ts title="app.module.ts"
-import { isPlatform, IonicModule } from '@ionic/angular';
+import { isPlatform, IonicModule } from '@ionic/angular/lazy';
 
 const getConfig = () => {
   let config = {
@@ -43,7 +43,7 @@ const getConfig = () => {
 <TabItem value="angular-standalone">
 
 ```ts title="main.ts"
-import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';
+import { isPlatform, provideIonicAngular } from '@ionic/angular';
 
 const getConfig = () => {
   let config = {
diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md
index b088a7e6bf6..7a5b73f7d71 100644
--- a/docs/developing/config/per-platform/index.md
+++ b/docs/developing/config/per-platform/index.md
@@ -20,7 +20,7 @@ See the [Angular Platform Documentation](../angular/platform) for the types of p
 :::
 
 ```ts title="app.module.ts"
-import { isPlatform, IonicModule } from '@ionic/angular';
+import { isPlatform, IonicModule } from '@ionic/angular/lazy';
 
 @NgModule({
   ...
@@ -43,7 +43,7 @@ See the [Angular Platform Documentation](../angular/platform) for the types of p
 :::
 
 ```ts title="main.ts"
-import { isPlatform, provideIonicAngular } from '@ionic/angular/standalone';
+import { isPlatform, provideIonicAngular } from '@ionic/angular';
 
 bootstrapApplication(AppComponent, {
   providers: [
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index b8698ef3377..9f44cff30f7 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -78,7 +78,7 @@ document.addEventListener('ionBackButton', (event) => {
 <TabItem value="angular">
 
 ```tsx
-import { Platform } from '@ionic/angular';
+import { Platform } from '@ionic/angular/lazy';
 
 ...
 
@@ -93,7 +93,7 @@ constructor(private platform: Platform) {
 <TabItem value="angular-standalone">
 
 ```tsx
-import { Platform } from '@ionic/angular/standalone';
+import { Platform } from '@ionic/angular';
 
 ...
 
@@ -170,7 +170,7 @@ document.addEventListener('ionBackButton', (event) => {
 <TabItem value="angular">
 
 ```tsx
-import { Platform } from '@ionic/angular';
+import { Platform } from '@ionic/angular/lazy';
 
 ...
 
@@ -191,7 +191,7 @@ constructor(private platform: Platform) {
 <TabItem value="angular-standalone">
 
 ```tsx
-import { Platform } from '@ionic/angular/standalone';
+import { Platform } from '@ionic/angular';
 
 ...
 
@@ -311,7 +311,7 @@ document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
 
 ```tsx
 import { Optional } from '@angular/core';
-import { IonRouterOutlet, Platform } from '@ionic/angular';
+import { IonRouterOutlet, Platform } from '@ionic/angular/lazy';
 import { App } from '@capacitor/app';
 
 ...
@@ -333,7 +333,7 @@ constructor(
 
 ```tsx
 import { Optional } from '@angular/core';
-import { IonRouterOutlet, Platform } from '@ionic/angular/standalone';
+import { IonRouterOutlet, Platform } from '@ionic/angular';
 import { App } from '@capacitor/app';
 
 ...
diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md
index 17d12aa9f6b..56fc8809d79 100644
--- a/docs/developing/keyboard.md
+++ b/docs/developing/keyboard.md
@@ -103,7 +103,7 @@ window.addEventListener('ionKeyboardDidHide', () => {
 <TabItem value="angular">
 
 ```tsx
-import { Platform } from '@ionic/angular';
+import { Platform } from '@ionic/angular/lazy';
 
 ...
 
@@ -122,7 +122,7 @@ constructor(private platform: Platform) {
 <TabItem value="angular-standalone">
 
 ```tsx
-import { Platform } from '@ionic/angular/standalone';
+import { Platform } from '@ionic/angular';
 
 ...
 
diff --git a/docs/developing/managing-focus.md b/docs/developing/managing-focus.md
index 33d2cb06c8f..ac6368fba0c 100644
--- a/docs/developing/managing-focus.md
+++ b/docs/developing/managing-focus.md
@@ -61,7 +61,7 @@ Developers can use the `ionViewDidEnter` lifecycle event to set focus to an elem
 ```ts
 /* example.component.ts */
 import { Component, ViewChild } from '@angular/core';
-import { IonInput } from '@ionic/angular';
+import { IonInput } from '@ionic/angular/lazy';
 
 @Component({
   selector: 'app-example',
@@ -167,7 +167,7 @@ Developers can use the `didPresent` lifecycle event to set focus to an element w
 ```ts
 /* example.component.ts */
 import { Component, ViewChild } from '@angular/core';
-import { IonInput } from '@ionic/angular';
+import { IonInput } from '@ionic/angular/lazy';
 
 @Component({
   selector: 'app-example',
diff --git a/docs/techniques/security.md b/docs/techniques/security.md
index 828644defd6..770d4e8d3fb 100644
--- a/docs/techniques/security.md
+++ b/docs/techniques/security.md
@@ -103,7 +103,7 @@ See [Enabling Custom HTML Parsing](#enabling-custom-html-parsing-via-innerhtml)
 <TabItem value="angular">
 
 ```tsx
-import { IonicSafeString, ToastController } from '@ionic/angular';
+import { IonicSafeString, ToastController } from '@ionic/angular/lazy';
 
 ...
 
@@ -122,7 +122,7 @@ async presentToast() {
 <TabItem value="angular-standalone">
 
 ```tsx
-import { IonicSafeString, ToastController } from '@ionic/angular/standalone';
+import { IonicSafeString, ToastController } from '@ionic/angular';
 
 ...
 
diff --git a/docs/updating/9-0.md b/docs/updating/9-0.md
index 035929d198e..112bc5dbcde 100644
--- a/docs/updating/9-0.md
+++ b/docs/updating/9-0.md
@@ -111,6 +111,9 @@ Ionic 9 supports TypeScript 5.4 or later, matching the minimum for Angular 18. A
 
 Angular 22 raises the minimum Node.js version to `^22.22.3 || ^24.15.0 || ^26.0.0`. Angular 18 through 21 are unaffected.
 
+#### Component Imports
+Ionic 9 makes standalone components the default import path. Change Lazy-loaded component imports from `@ionic/angular` to `@ionic/angular/lazy`. Change Standalone component imports from `@ionic/angular/standalone` to `@ionic/angular`.
+
 #### CSS Imports
 
 Remove the `~` prefix from `@ionic/angular` CSS imports. Angular's current build pipeline no longer supports the webpack-loader prefix:
@@ -122,7 +125,7 @@ Remove the `~` prefix from `@ionic/angular` CSS imports. Angular's current build
 
 #### Module Resolution
 
-If your app uses TypeScript `moduleResolution: "node"` (classic), imports from subpaths such as `@ionic/angular/standalone` can fail to resolve. Set `moduleResolution` to `"bundler"` in your `tsconfig.json`. Apps created with `ng new` on Angular 17 or later already use this.
+If your app uses TypeScript `moduleResolution: "node"` (classic), imports from subpaths such as `@ionic/angular/lazy` can fail to resolve. Set `moduleResolution` to `"bundler"` in your `tsconfig.json`. Apps created with `ng new` on Angular 17 or later already use this.
 
 ### React
 
diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 996e7c6c37a..2f5ba748d04 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -76,7 +76,7 @@ Developers using Angular should install the latest version of `@ionic/angular`.
 
 ```tsx
 
-import { Animation, AnimationController } from '@ionic/angular';
+import { Animation, AnimationController } from '@ionic/angular/lazy';
 
 ...
 
@@ -95,7 +95,7 @@ Developers using Angular should install the latest version of `@ionic/angular`.
 
 ```tsx
 
-import { Animation, AnimationController } from '@ionic/angular/standalone';
+import { Animation, AnimationController } from '@ionic/angular';
 
 ...
 
diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
index 8afc03f5ec3..ec00f22e33e 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -77,7 +77,7 @@ By default, gesture callbacks do not run inside of NgZone. Developers can either
 or they can wrap their callbacks in an `NgZone.run()` call.
 
 ```tsx
-import { Gesture, GestureController } from '@ionic/angular';
+import { Gesture, GestureController } from '@ionic/angular/lazy';
 
 ...
 
@@ -101,7 +101,7 @@ By default, gesture callbacks do not run inside of NgZone. Developers can either
 or they can wrap their callbacks in an `NgZone.run()` call.
 
 ```tsx
-import { Gesture, GestureController } from '@ionic/angular/standalone';
+import { Gesture, GestureController } from '@ionic/angular';
 
 ...
 

From a0f7468a2b59ab58e62b453c6f294b91ca6a3453 Mon Sep 17 00:00:00 2001
From: OS-jacobbell <228905018+OS-jacobbell@users.noreply.github.com>
Date: Thu, 9 Jul 2026 11:06:07 -0600
Subject: [PATCH 2/2] lint and spellcheck

---
 docs/updating/9-0.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/updating/9-0.md b/docs/updating/9-0.md
index 112bc5dbcde..c2c768c2e56 100644
--- a/docs/updating/9-0.md
+++ b/docs/updating/9-0.md
@@ -112,6 +112,7 @@ Ionic 9 supports TypeScript 5.4 or later, matching the minimum for Angular 18. A
 Angular 22 raises the minimum Node.js version to `^22.22.3 || ^24.15.0 || ^26.0.0`. Angular 18 through 21 are unaffected.
 
 #### Component Imports
+
 Ionic 9 makes standalone components the default import path. Change Lazy-loaded component imports from `@ionic/angular` to `@ionic/angular/lazy`. Change Standalone component imports from `@ionic/angular/standalone` to `@ionic/angular`.
 
 #### CSS Imports