Merge pull request #4646 from ionic-team/major-9.0

merge major-9.0

Author: ShaneK

.github/workflows/CI.yml

@@ -28,6 +28,8 @@ jobs:
       run: npm ci --legacy-peer-deps
     - name: 🖌️ Lint
       run: npm run lint
+    - name: Test
+      run: npm run test
     - name: 🔤 Spell Check
       run: npm run spellcheck
     - uses: ./.github/workflows/actions/check-translations

_templates/README.md

@@ -26,7 +26,7 @@ Once you've generated your playground, you need to add it to the main markdown f
 ```
 ## Feature
 
-import Feature from '@site/static/usage/v8/button/feature/index.md';
+import Feature from '@site/static/usage/v9/button/feature/index.md';
 
 <Feature />
 ```

_templates/playground/new/angular_example_component_ts.md.ejs.t

@@ -4,7 +4,7 @@ to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.
 ---
 ```ts
 import { Component } from '@angular/core';
-import { <%= pascalComponent %> } from '@ionic/angular/standalone';
+import { <%= pascalComponent %> } from '@ionic/angular';
 
 @Component({
   selector: 'app-example',

_templates/playground/new/index.js

@@ -54,8 +54,8 @@ module.exports = {
               type: 'select',
               name: 'version',
               message: 'Select the Ionic Framework version for the playground',
-              initial: '8',
-              choices: ['6', '7', '8'],
+              initial: '9',
+              choices: ['6', '7', '8', '9'],
             },
             {
               type: 'toggle',

cspell-wordlist.txt

@@ -33,10 +33,13 @@ autogrow
 automations
 autoplay
 Callout
+codemods
 comparewith
 composables
 engageable
 flexbox
+fontawesome
+fortawesome
 frontmatter
 fullscreen
 geolocation
@@ -58,11 +61,15 @@ preconfigured
 preflighted
 proxying
 quickstart
+remixicon
 retargeted
 runtimes
 scroller
 subcomponent
 subcomponents
+subpath
+subpaths
+svgs
 swipeable
 templating
 transpiling

docs/angular/add-to-existing.md

@@ -85,22 +85,19 @@ While `core.css` is required, `normalize.css`, `structure.css`, and `typography.
 Update `src/app/app.config.ts` to include `provideIonicAngular`:
 
 ```typescript title="src/app/app.config.ts"
-import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
 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(),
-    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
-    provideIonicAngular({}),
-  ],
+  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes), provideIonicAngular({})],
 };
 ```
 
+This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for details.
+
 ## Using Individual Components
 
 After completing the setup above, you can start using Ionic components in your existing Angular app. Here's an example of how to use them:
@@ -115,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',
@@ -210,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',
@@ -253,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',

docs/angular/build-options.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({

docs/angular/injection-tokens.md

@@ -201,7 +201,9 @@ To get started with standalone components [visit Angular's official docs](https:
 
 ## Live Example
 
-If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz.
+import NavigationPlayground from '@site/static/usage/v9/navigation/index.md';
+
+<NavigationPlayground defaultFramework="angular" />
 
 ## Linear Routing versus Non-Linear Routing
 

docs/angular/navigation.md

@@ -19,7 +19,7 @@ Overlays can be created programmatically using their respective controllers:
 
 ```typescript
 import { Component } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular';
 import { MyModalComponent } from './my-modal.component';
 
 @Component({
@@ -61,7 +61,7 @@ To use a custom injector, pass it to the `create()` method:
 
 ```typescript
 import { Component, Injector } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular';
 import { MyModalComponent } from './my-modal.component';
 import { MyRouteService } from './my-route.service';
 
@@ -104,7 +104,7 @@ You can also create a custom injector with specific providers:
 
 ```typescript
 import { Component, Injector } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular';
 import { MyModalComponent } from './my-modal.component';
 import { MyService } from './my.service';
 
@@ -140,7 +140,7 @@ A common use case is providing the Angular CDK `Dir` directive to overlays for b
 ```typescript
 import { Component, Injector } from '@angular/core';
 import { Dir } from '@angular/cdk/bidi';
-import { ModalController } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular';
 import { MyModalComponent } from './my-modal.component';
 
 @Component({
@@ -166,7 +166,7 @@ The `PopoverController` supports the same `injector` option:
 
 ```typescript
 import { Component, Injector } from '@angular/core';
-import { PopoverController } from '@ionic/angular/standalone';
+import { PopoverController } from '@ionic/angular';
 import { MyPopoverComponent } from './my-popover.component';
 
 @Component({
@@ -194,10 +194,10 @@ Ionic Angular exports its own `ModalOptions` and `PopoverOptions` types that ext
 - `ModalOptions` - Extends core `ModalOptions` with the `injector` property
 - `PopoverOptions` - Extends core `PopoverOptions` with the `injector` property
 
-These types are exported from `@ionic/angular` and `@ionic/angular/standalone`:
+These types are exported from `@ionic/angular` and `@ionic/angular/lazy`:
 
 ```typescript
-import type { ModalOptions, PopoverOptions } from '@ionic/angular/standalone';
+import type { ModalOptions, PopoverOptions } from '@ionic/angular';
 ```
 
 ## Docs for Overlays in Ionic