refactor(angular): make standalone imports default

BREAKING.md

@@ -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`.
+
 **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()`.

core/stencil.config.ts

@@ -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',
     }),

packages/angular/.prettierignore

@@ -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

packages/angular/README.md

@@ -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**
 
 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`.

packages/angular/eslint.config.js

@@ -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,
       },

packages/angular/standalone/ng-package.json → packages/angular/lazy/ng-package.json

@@ -1,5 +1,5 @@
 {
   "lib": {
     "entryFile": "src/index.ts"
-  },
+  }
 }

packages/angular/ng-package.json

@@ -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"]
 }

packages/angular/src/schematics/add/index.ts → packages/angular/schematics/add/index.ts

@@ -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 {
@@ -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')}({})`
       );
     }
     return host;

packages/angular/src/schematics/utils/ast.ts → packages/angular/schematics/utils/ast.ts

@@ -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]);
 

packages/angular/scripts/build-core.js

@@ -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);

packages/angular/test/apps/ng18/src/app/lazy/version-test/modal-nav-params/modal-nav-params.component.ts

@@ -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";
 

packages/angular/test/apps/ng18/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -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

packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/modal/modal.component.ts

@@ -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',

packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/programmatic-modal.component.ts

@@ -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({

packages/angular/test/apps/ng19/src/app/standalone/programmatic-modal/programmatic-modal.service.ts

@@ -1,5 +1,5 @@
 import { inject, Injectable } from '@angular/core';
-import { ModalController } from "@ionic/angular/standalone";
+import { ModalController } from "@ionic/angular";
 import { ModalComponent } from "./modal/modal.component";
 
 @Injectable({