Skip to content

bug: IonTabs (standalone) imports the directives/proxies barrel, so every component lands in the initial chunk #31594

Closed

Description

@beqa7137

Ionic Framework Version

v9.x (9.0.8; also present on main)

Current Behavior

Per-component entry points (#31303, closing #30114) let a standalone app keep Ionic components that only lazy routes use out of the initial chunk. As soon as the app uses IonTabs, that no longer works.

packages/angular/src/standalone/navigation/tabs.ts imports from the barrel:

import { IonTabBar, IonTab } from '../directives/proxies';

directives/proxies re-exports every component proxy. Bundlers assign chunks by reachability, so an eager IonTabs (the usual tabs shell at the root route) pulls every Ionic component the app uses anywhere into the initial chunk. That includes fab, segment-button, datetime-button, reorder, infinite-scroll, card and grid, even when only lazy routes import them.

The code-splitting test app added in #31401 has no tabs (ion-app + ion-router-outlet only), so the test doesn't catch this.

Expected Behavior

Using IonTabs adds only the tabs, tab bar and tab code to the chunk that imports it.

Steps to Reproduce

  1. Use a standalone app with an eager tabs shell (IonTabs in the root route's component) and several lazy routes that use other components (e.g. IonFab, IonSegmentButton, IonInfiniteScroll).
  2. Import every component from its per-component entry (@ionic/angular/ion-fab, ...).
  3. Run ng build --stats-json and inspect the initial chunk: the lazy-only components are in it, reached through navigation/tabs.js → directives/proxies.js.

Proposed fix

Import the two proxies from their own files, as the per-component entries already do:

import { IonTabBar } from '../directives/ion-tab-bar';
import { IonTab } from '../directives/ion-tab';

Measured on a real app (Angular 22, esbuild, ~100 routes) by applying this to the built dist/standalone/navigation/tabs.js:

Initial total Compressed main
9.0.8 as published 1.52 MB 356.7 kB 598 kB
with the two imports above 1.36 MB 337.8 kB 440 kB

Adding a tabs route to the code-split test app would cover this case.

Additional Information

provideIonicAngular also makes the modal and popover controllers eager (~84 kB raw in the same app), but that is a separate question.

Activity

  1. added
    type: buga confirmed bug report
    and removed on Oct 19, 2026
  2. added theissue type on Oct 19, 2026
  3. ShaneK commented on Oct 19, 2026

    @ShaneK
    Member

    Thanks for the report, great find! A PR has been put up for this that looks like a solid fix, it'll be merged soon and the fix should be deployed this week when the next patch release goes out

  4. added a commit that references this issue on Oct 19, 2026
    cb963f8
  5. ShaneK commented on Oct 21, 2026

    @ShaneK
    Member

    The fix for this issue was deployed in v9.0.9!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: buga confirmed bug report

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions