Skip to content

refactor(angular): make standalone imports default#31217

Open
OS-jacobbell wants to merge 7 commits into
major-9.0from
FW-7273
Open

refactor(angular): make standalone imports default#31217
OS-jacobbell wants to merge 7 commits into
major-9.0from
FW-7273

Conversation

@OS-jacobbell

Copy link
Copy Markdown
Contributor

What is the current behavior?

The default path for imports is @ionic/angular and imports the lazy-loaded angular components. @ionic/angular/standalone imports the standalone components.

What is the new behavior?

The default path, @ionic/angular, imports standalone components. Lazy-loaded components are imported from @ionic/angular/lazy.

Does this introduce a breaking change?

  • Yes
  • No

Applications that use lazy-loaded angular components will need to update their import paths from @ionic/angular to @ionic/angular/lazy.
Applications that use standalone angular components will need to update their import paths from @ionic/angular/standalone to @ionic/angular.

Other information

Ionic starters will need their import paths updated to match these changes.

@OS-jacobbell OS-jacobbell requested a review from a team as a code owner June 15, 2026 20:15
@vercel

vercel Bot commented Jun 15, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Jun 22, 2026 3:03pm

Request Review

@github-actions github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package labels Jun 15, 2026
@OS-jacobbell OS-jacobbell changed the title Fw 7273 refactor(angular): make standalone imports default Jun 17, 2026

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work! Just a few problems below, but I also noticed a couple of other problems outside the diff scope:

  • BREAKING.md wasn't updated, and it definitely should be for this. This is a massive breaking change. Worth a migration note: @ionic/angular/standalone becomes @ionic/angular, and @ionic/angular becomes @ionic/angular/lazy. The existing Module Resolution section also uses @ionic/angular/standalone as its example subpath (BREAKING.md:203), which no longer exists after this change.
  • The Project Structure section in packages/angular/README.md (lines 96-114) is now stale. It still describes a src submodule imported from @ionic/angular and standalone imported from @ionic/angular/standalone, both reversed and renamed now.

Comment thread packages/angular/schematics/add/index.ts

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Thanks! Two minor doc change requests, but not blocking

Comment thread BREAKING.md
Ionic 9 requires Angular 18 or later. Angular 16 and 17 are no longer supported.

**Standalone Components Imported by Default**
Following industry standards, Ionic 9 makes standalone components the default import path. Standalone component imports have changed from `@ionic/angular/standalone` to `@ionic/angular`. Lazy-loaded component imports have changed from `@ionic/angular` to `@ionic/angular/lazy`.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding this section! One follow-up from my earlier review is still open: the Module Resolution paragraph further down (line 206) still uses @ionic/angular/standalone as its example subpath, which this PR removes. Can you point it at something that still exists, like @ionic/angular/lazy or @ionic/angular/common?

Ionic developers can access this by importing from `@ionic/angular/standalone`.
Ionic developers can access this by importing from `@ionic/angular`.

**src**

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**src**
**lazy**

The body text reads right now, but the heading still says **src**. This PR renamed that directory to lazy/, so the heading names a directory that no longer exists.

import { Component } from "@angular/core";

import { IonicModule } from '@ionic/angular';
import { IonicModule } from '@ionic/angular/lazy';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is under the standalone folder. So shouldn't this just be @ionic/angular?

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular/lazy';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the default is now standalone, shouldn't this file be updated to handle standalone?

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

Labels

package: angular @ionic/angular package package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants