fix(angular): populate tabs outlet before initial ionTabsWillChange

packages/angular/src/common/directives/navigation/tabs.ts

@@ -118,7 +118,10 @@ export abstract class IonTabs implements AfterViewInit, AfterContentInit, AfterC
   /**
    * @internal
    */
-  onStackWillChange({ enteringView, tabSwitch }: StackWillChangeEvent): void {
+  onStackWillChange({ enteringView, tabSwitch }: StackWillChangeEvent, outlet?: any): void {
+    if (outlet && !this.outlet) {
+      this.outlet = outlet;
+    }
     const stackId = enteringView.stackId;
     if (tabSwitch && stackId !== undefined) {
       this.ionTabsWillChange.emit({ tab: stackId });

packages/angular/src/lazy/directives/navigation/ion-tabs.ts

@@ -19,7 +19,7 @@ import { IonRouterOutlet } from './ion-router-outlet';
         *ngIf="tabs.length === 0"
         #outlet
         tabs="true"
-        (stackWillChange)="onStackWillChange($event)"
+        (stackWillChange)="onStackWillChange($event, outlet)"
         (stackDidChange)="onStackDidChange($event)"
       ></ion-router-outlet>
       <ng-content *ngIf="tabs.length > 0" select="ion-tab"></ng-content>

packages/angular/src/standalone/navigation/tabs.ts

@@ -20,7 +20,7 @@ import { IonRouterOutlet } from './router-outlet';
         *ngIf="tabs.length === 0"
         #outlet
         tabs="true"
-        (stackWillChange)="onStackWillChange($event)"
+        (stackWillChange)="onStackWillChange($event, outlet)"
         (stackDidChange)="onStackDidChange($event)"
       ></ion-router-outlet>
       <ng-content *ngIf="tabs.length > 0" select="ion-tab"></ng-content>

packages/angular/test/base/e2e/src/lazy/tabs.spec.ts

@@ -513,4 +513,22 @@ test('Tabs should support conditional slots', async ({ page }) => {
 
   // The tab bar should be added to the bottom
   await expect(page.locator('ion-tabs .tabs-inner + ion-tab-bar')).toHaveCount(1);
+  test.describe('Deferred IonTabs initialization', () => {
+    test('should populate outlet before emitting initial ionTabsWillChange', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31674',
+      });
+
+      await page.goto('/lazy/tabs-outlet-init');
+      await page.locator('#show-tabs').click();
+
+      await expect(page.locator('app-tabs-outlet-init-tab-one')).toBeVisible();
+      await expect(page.locator('#will-change-log')).toHaveText('tab-one:true:undefined');
+
+      await page.locator('#tab-button-tab-two').click();
+      await expect(page.locator('app-tabs-outlet-init-tab-two')).toBeVisible();
+      await expect(page.locator('#will-change-log')).toHaveText('tab-one:true:undefined,tab-two:true:tab-one');
+    });
+  });
 });

packages/angular/test/base/e2e/src/standalone/tabs.spec.ts

@@ -46,4 +46,23 @@ test.describe('Tabs', () => {
       await expect(page).toHaveURL(/.*\/tabs-basic/);
     });
   });
+
+  test.describe('Deferred IonTabs initialization', () => {
+    test('should populate outlet before emitting initial ionTabsWillChange', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31674',
+      });
+
+      await page.goto('/standalone/tabs-outlet-init');
+      await page.locator('#show-tabs').click();
+
+      await expect(page.locator('app-tab-one')).toBeVisible();
+      await expect(page.locator('#will-change-log')).toHaveText('tab-one:true:undefined');
+
+      await page.locator('#tab-button-tab-two').click();
+      await expect(page.locator('app-tab-two')).toBeVisible();
+      await expect(page.locator('#will-change-log')).toHaveText('tab-one:true:undefined,tab-two:true:tab-one');
+    });
+  });
 });

packages/angular/test/base/src/app/lazy/app-lazy/app.routes.ts

@@ -78,6 +78,11 @@ export const routes: Routes = [
         path: 'tabs-slots',
         loadComponent: () => import('../tabs-slots.component').then(c => c.TabsSlotsComponent)
       },
+      { path: 'tabs-outlet-init', redirectTo: '/lazy/tabs-outlet-init/tab-one', pathMatch: 'full' },
+      {
+        path: 'tabs-outlet-init',
+        loadChildren: () => import('../tabs-outlet-init/tabs-outlet-init.module').then(m => m.TabsOutletInitModule)
+      },
       { path: 'tabs-basic', component: TabsBasicComponent },
       {
         path: 'nested-outlet',

packages/angular/test/base/src/app/lazy/tabs-outlet-init/tabs-outlet-init.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonTabs } from '@ionic/angular/lazy';
+
+@Component({
+  selector: 'app-tabs-outlet-init',
+  changeDetection: ChangeDetectionStrategy.Default,
+  standalone: false,
+  template: `
+    <button type="button" id="show-tabs" (click)="showTabs = true">Show Tabs</button>
+    <ion-tabs *ngIf="showTabs" #tabs (ionTabsWillChange)="onWillChange($event, tabs)">
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="tab-one">
+          <ion-label>Tab One</ion-label>
+        </ion-tab-button>
+        <ion-tab-button tab="tab-two">
+          <ion-label>Tab Two</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+    <div id="will-change-log">{{ willChangeLog.join(',') }}</div>
+  `,
+})
+export class TabsOutletInitComponent {
+  showTabs = false;
+  willChangeLog: string[] = [];
+
+  onWillChange(ev: { tab: string }, tabs: IonTabs) {
+    this.willChangeLog.push(`${ev.tab}:${Boolean(tabs.outlet?.nativeEl)}:${String(tabs.getSelected())}`);
+  }
+}
+
+@Component({
+  selector: 'app-tabs-outlet-init-tab-one',
+  changeDetection: ChangeDetectionStrategy.Default,
+  standalone: false,
+  template: 'Tab 1',
+})
+export class TabsOutletInitTabOneComponent {}
+
+@Component({
+  selector: 'app-tabs-outlet-init-tab-two',
+  changeDetection: ChangeDetectionStrategy.Default,
+  standalone: false,
+  template: 'Tab 2',
+})
+export class TabsOutletInitTabTwoComponent {}

packages/angular/test/base/src/app/lazy/tabs-outlet-init/tabs-outlet-init.module.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { IonicModule } from '@ionic/angular/lazy';
+
+import {
+  TabsOutletInitComponent,
+  TabsOutletInitTabOneComponent,
+  TabsOutletInitTabTwoComponent,
+} from './tabs-outlet-init.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TabsOutletInitComponent,
+    children: [
+      { path: 'tab-one', component: TabsOutletInitTabOneComponent },
+      { path: 'tab-two', component: TabsOutletInitTabTwoComponent },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [CommonModule, IonicModule, RouterModule.forChild(routes)],
+  declarations: [TabsOutletInitComponent, TabsOutletInitTabOneComponent, TabsOutletInitTabTwoComponent],
+})
+export class TabsOutletInitModule {}

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -72,6 +72,15 @@ export const routes: Routes = [
           { path: 'tab-three', loadComponent: () => import('../tabs/tab3.component').then(c => c.TabThreeComponent) }
         ]
       },
+      { path: 'tabs-outlet-init', redirectTo: '/standalone/tabs-outlet-init/tab-one', pathMatch: 'full' },
+      {
+        path: 'tabs-outlet-init',
+        loadComponent: () => import('../tabs/tabs-outlet-init.component').then(c => c.TabsOutletInitComponent),
+        children: [
+          { path: 'tab-one', loadComponent: () => import('../tabs/tab1.component').then(c => c.TabOneComponent) },
+          { path: 'tab-two', loadComponent: () => import('../tabs/tab2.component').then(c => c.TabTwoComponent) }
+        ]
+      },
       { path: 'tabs-basic', loadComponent: () => import('../tabs-basic/tabs-basic.component').then(c => c.TabsBasicComponent) },
       { path: 'tabs-search-params', redirectTo: '/standalone/tabs-search-params/tab1?foo=bar', pathMatch: 'full' },
       {

packages/angular/test/base/src/app/standalone/tabs/tabs-outlet-init.component.ts

@@ -0,0 +1,32 @@
+import { NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular';
+
+@Component({
+  selector: 'app-tabs-outlet-init',
+  changeDetection: ChangeDetectionStrategy.Default,
+  standalone: true,
+  imports: [NgIf, IonLabel, IonTabBar, IonTabButton, IonTabs],
+  template: `
+    <button type="button" id="show-tabs" (click)="showTabs = true">Show Tabs</button>
+    <ion-tabs *ngIf="showTabs" #tabs (ionTabsWillChange)="onWillChange($event, tabs)">
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="tab-one">
+          <ion-label>Tab One</ion-label>
+        </ion-tab-button>
+        <ion-tab-button tab="tab-two">
+          <ion-label>Tab Two</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+    <div id="will-change-log">{{ willChangeLog.join(',') }}</div>
+  `,
+})
+export class TabsOutletInitComponent {
+  showTabs = false;
+  willChangeLog: string[] = [];
+
+  onWillChange(ev: { tab: string }, tabs: IonTabs) {
+    this.willChangeLog.push(`${ev.tab}:${Boolean(tabs.outlet?.nativeEl)}:${String(tabs.getSelected())}`);
+  }
+}