Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion BREAKING.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,9 @@ Apps that relied on `ionChange` firing on every confirmation (for example, to de

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`.
Comment thread
OS-jacobbell marked this conversation as resolved.

**Zoneless Change Detection by Default**

Ionic 9 defaults to zoneless change detection. Angular 21 bootstraps zoneless out of the box, so a new Ionic 9 app on Angular 21 runs without Zone.js and requires no change-detection provider. The `ng add @ionic/angular` schematic no longer registers `provideZoneChangeDetection()`.
Expand Down Expand Up @@ -200,7 +203,7 @@ Angular 22 raises the minimum Node.js version to `^22.22.3 || ^24.15.0 || ^26.0.

**Module Resolution**

`@ionic/angular` is now published with `exports`-based subpath resolution. Apps using TypeScript `moduleResolution: "node"` (classic) can fail to resolve subpaths such as `@ionic/angular/standalone`. Set `moduleResolution` to `"bundler"` (the default for `ng new` on Angular 17 and later). Refer to [Package Exports](#version-9x-package-exports).
`@ionic/angular` is now published with `exports`-based subpath resolution. Apps using TypeScript `moduleResolution: "node"` (classic) can fail to resolve subpaths such as `@ionic/angular/lazy`. Set `moduleResolution` to `"bundler"` (the default for `ng new` on Angular 17 and later). Refer to [Package Exports](#version-9x-package-exports).

**CSS Imports No Longer Use the `~` Prefix**

Expand Down
4 changes: 2 additions & 2 deletions core/stencil.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ const getAngularOutputTargets = () => {
return [
angularOutputTarget({
componentCorePackage,
directivesProxyFile: '../packages/angular/src/directives/proxies.ts',
directivesArrayFile: '../packages/angular/src/directives/proxies-list.ts',
directivesProxyFile: '../packages/angular/lazy/src/directives/proxies.ts',
directivesArrayFile: '../packages/angular/lazy/src/directives/proxies-list.ts',
excludeComponents,
outputType: 'component',
}),
Expand Down
2 changes: 1 addition & 1 deletion packages/angular/.prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ dist
scripts
test
proxies.ts
src/directives/proxies-list.ts
lazy/src/directives/proxies-list.ts
**/*/angular-component-lib/utils.ts
10 changes: 5 additions & 5 deletions packages/angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,16 +99,16 @@ The local Ionic Framework build is now active in the Angular app. Changes to the

This is where logic that is shared between lazy loaded and standalone components live. For example, the lazy loaded IonPopover and standalone IonPopover components extend from a base IonPopover implementation that exists in this directory.

**Note:** This directory exposes internal APIs and is only accessed in the `standalone` and `src` submodules. Ionic developers should never import directly from `@ionic/angular/common`. Instead, they should import from `@ionic/angular` or `@ionic/angular/standalone`.
**Note:** This directory exposes internal APIs and is only accessed in the `standalone` and `lazy` submodules. Ionic developers should never import directly from `@ionic/angular/common`. Instead, they should import from `@ionic/angular` or `@ionic/angular/lazy`.

**standalone**

This is where the standalone component implementations live. It was added as a separate entry point to avoid any lazy loaded logic from accidentally being pulled in to the final build. Having a separate directory allows the lazy loaded implementation to remain accessible from `@ionic/angular` for backwards compatibility.
This is where the standalone component implementations live. It was added as a separate entry point to avoid any lazy loaded logic from accidentally being pulled in to the final build. Having a separate directory allows the lazy loaded implementation to remain accessible from `@ionic/angular/lazy` for backwards compatibility.

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

**src**
**lazy**

This is where the lazy loaded component implementations live.

Ionic developers can access this by importing from `@ionic/angular`.
Ionic developers can access this by importing from `@ionic/angular/lazy`.
2 changes: 1 addition & 1 deletion packages/angular/eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ module.exports = [
// inferred project for them (the ts-eslint 8 equivalent of the old
// createDefaultProgram option).
projectService: {
allowDefaultProject: ['src/ionic-core.ts', 'src/schematics/add/*.ts', 'src/schematics/utils/*.ts'],
allowDefaultProject: ['lazy/src/ionic-core.ts', 'schematics/add/*.ts', 'schematics/utils/*.ts'],
},
tsconfigRootDir: __dirname,
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"lib": {
"entryFile": "src/index.ts"
},
}
}
File renamed without changes.
2 changes: 1 addition & 1 deletion packages/angular/ng-package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "src/index.ts"
"entryFile": "standalone/src/index.ts"
},
"allowedNonPeerDependencies": ["@ionic/core", "ionicons", "jsonc-parser"]
}
32 changes: 30 additions & 2 deletions packages/angular/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ import { addRootProvider } from '@schematics/angular/utility';
import { getWorkspace } from '@schematics/angular/utility/workspace';

import { addIonicModuleImportToNgModule } from '../utils/ast';

import {
addArchitectBuilder,
addAsset,
addCli,
addSchematics,
addStyle,
getDefaultAngularAppName,
} from './../utils/config';
import { addPackageToPackageJson } from './../utils/package';
} from '../utils/config';
import { addPackageToPackageJson } from '../utils/package';

import { Schema as IonAddOptions } from './schema';

function addIonicAngularToPackageJson(): Rule {
Expand Down Expand Up @@ -86,7 +86,7 @@ function addProvideIonicAngular(projectName: string, projectSourceRoot: Path): R
if (host.exists(appConfig)) {
return addRootProvider(
projectName,
({ code, external }) => code`${external('provideIonicAngular', '@ionic/angular/standalone')}({})`
({ code, external }) => code`${external('provideIonicAngular', '@ionic/angular')}({})`
Comment thread
OS-jacobbell marked this conversation as resolved.
);
}
return host;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function addIonicModuleImportToNgModule(host: Tree, modulePath: string):
const recorder = host.beginUpdate(modulePath);
const moduleSource = getSourceFile(host, modulePath) as any;

const ionicModuleChange = insertImport(moduleSource, modulePath, 'IonicModule', '@ionic/angular');
const ionicModuleChange = insertImport(moduleSource, modulePath, 'IonicModule', '@ionic/angular/lazy');

applyToUpdateRecorder(recorder, [ionicModuleChange]);

Expand Down
8 changes: 4 additions & 4 deletions packages/angular/scripts/build-core.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ function buildSchematics(){
}

function copySchematicsJson(){
const src = path.join(__dirname, '..', 'src', 'schematics', 'collection.json');
const fileSrc = path.join(__dirname, '..', 'src', 'schematics', 'add', 'files');
const dst = path.join(__dirname, '..', 'dist','schematics', 'collection.json');
const src = path.join(__dirname, '..', 'schematics', 'collection.json');
const fileSrc = path.join(__dirname, '..', 'schematics', 'add', 'files');
const dst = path.join(__dirname, '..', 'dist', 'schematics', 'collection.json');
const fileDst = path.join(__dirname, '..', 'dist', 'schematics', 'add', 'files');
const schemaSrc = path.join(__dirname, '..', 'src', 'schematics', 'add', 'schema.json');
const schemaSrc = path.join(__dirname, '..', 'schematics', 'add', 'schema.json');
const schemaDst = path.join(__dirname, '..', 'dist', 'schematics', 'add', 'schema.json');

fs.removeSync(dst);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Component } from "@angular/core";

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

import { NavRootComponent } from "./nav-root.component";

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { JsonPipe } from "@angular/common";
import { Component, OnInit } from "@angular/core";

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

/**
* This is used to track if any occurrences of
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, Inject } from '@angular/core';
import { IonButton, IonModalToken } from "@ionic/angular/standalone";
import { IonButton, IonModalToken } from "@ionic/angular";

@Component({
selector: 'app-modal',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { IonButton } from '@ionic/angular/standalone';
import { IonButton } from '@ionic/angular';
import { ProgrammaticModalService } from './programmatic-modal.service';

@Component({
Expand Down
Loading
Loading