ionic-team
diff --git a/‎.github/CODEOWNERS‎
Lines changed: 2 additions & 3 deletions b/‎.github/CODEOWNERS‎
Lines changed: 2 additions & 3 deletions
diff --git a/‎.github/workflows/CI.yml‎
Lines changed: 3 additions & 3 deletions b/‎.github/workflows/CI.yml‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎docs/angular/build-options.md‎
Lines changed: 93 additions & 0 deletions b/‎docs/angular/build-options.md‎
Lines changed: 93 additions & 0 deletions
diff --git a/‎docs/angular/your-first-app.md‎
Lines changed: 1 addition & 1 deletion b/‎docs/angular/your-first-app.md‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎docs/api/reorder.md‎
Lines changed: 5 additions & 1 deletion b/‎docs/api/reorder.md‎
Lines changed: 5 additions & 1 deletion
@@ -11,7 +11,6 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.
 
-/_templates/ @mapsandapps
+* @ionic-team/framework
 
-/static/code/stackblitz/**/*/package.json @ionic-team/framework
-/static/code/stackblitz/**/*/package-lock.json @ionic-team/framework
+/_templates/ @mapsandapps
@@ -12,13 +12,13 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node_version: [19]
+        node_version: [20]
         os: [windows-latest, macOS-latest]
 
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node_version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node_version }}
     - name: Install Dependencies
 
@@ -113,6 +113,41 @@ export class HomePage {
 }
 ```
 
+Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal.
+
+```typescript title="app.component.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+  standalone: true,
+})
+export class AppComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ logoIonic });
+  }
+}
+```
+
+Icons registered in an application entry point can then be referenced by name anywhere in the application.
+
+```html title="home.page.html"
+<!-- 
+  logoIonic was registered in app.component.ts instead of home.page.ts,
+  but it can still be used in home.page.html.
+-->
+<ion-icon name="logo-ionic"></ion-icon>
+```
+
 **Routing**
 
 Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (`<a>`) elements should import `IonRouterLinkWithHref` instead.
@@ -218,6 +253,40 @@ export class HomePage {
 }
 ```
 
+Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal.
+
+```typescript title="app.component.ts"
+import { Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { logoIonic } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ logoIonic });
+  }
+}
+```
+
+Icons registered in an application entry point can then be referenced by name anywhere in the application.
+
+```html title="home.page.html"
+<!-- 
+  logoIonic was registered in app.component.ts instead of home.page.ts,
+  but it can still be used in home.page.html.
+-->
+<ion-icon name="logo-ionic"></ion-icon>
+```
+
 **Routing**
 
 Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (`<a>`) elements should import `IonRouterLinkWithHref` instead.
@@ -283,10 +352,18 @@ export class AppModule {}
 
 ## Migrating from Modules to Standalone
 
+:::tip
+Try our automated utility for migrating to standalone!
+
+See https://github.com/ionic-team/ionic-angular-standalone-codemods for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo.
+:::
+
 The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate.
 
 Migrating to Ionic standalone components must be done all at the same time and cannot be done gradually. The Modules and Standalone approaches use two different build systems of Ionic that cannot be used at the same time.
 
+Developers are encouraged to try the [automated migration utility](https://github.com/ionic-team/ionic-angular-standalone-codemods), though they can also follow the steps below if they would like to manually migrate their applications.
+
 ### Standalone-based Applications
 
 Follow these steps if your Angular application is already using the standalone architecture, and you want to use Ionic UI components as standalone components too.
@@ -407,6 +484,14 @@ import { Component } from '@angular/core';
 export class TestComponent {}
 ```
 
+10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations.
+
+```json title=".vscode/settings.json"
+{
+  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
+}
+```
+
 ### NgModule-based Applications
 
 Follow these steps if your Angular application is still using the NgModule architecture, but you want to adopt Ionic UI components as standalone components now.
@@ -576,3 +661,11 @@ import { TestComponent } from './test.component';
   declarations: [TestComponent]
 })
 ```
+
+10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations.
+
+```json title=".vscode/settings.json"
+{
+  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
+}
+```
@@ -106,7 +106,7 @@ Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
 ```tsx
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
-// Call the element loader after the platform has been bootstrapped
+// Call the element loader before the bootstrapModule/bootstrapApplication call
 defineCustomElements(window);
 ```
 
 
@@ -61,10 +61,14 @@ import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.md';
 
 ## データの更新
 
-パラメータを指定せずに reorder グループに対して `complete` メソッドを呼び出すと、DOM ノードが並べ替えられます。項目がソートが必要なデータの配列からレンダリングされた場合、データと DOM が同期しないことがあります。並べ替えの完了時に配列をソートするには、`complete` メソッドのパラメータとして配列を渡す必要があります。 `complete`メソッドは配列をソートして返し、再代入できるようにしてください。
+パラメータを指定せずに reorder グループに対して `complete` メソッドを呼び出すと、DOM ノードが並べ替えられます。項目がソートが必要なデータの配列からレンダリングされた場合、データと DOM が同期しない可能性があります。
+
+並べ替えの完了時に配列をソートするには、`complete` メソッドのパラメータとして配列を渡す必要があります。complete`メソッドは配列をソートして返し、再代入できるようにする。配列を渡すと、IonicはDOMノードの並び替えを行わないので注意してください。
 
 場合によっては、アプリが独自に配列と DOM ノードの両方を並べ替える必要があるかもしれません。その場合は `complete` メソッドに `false` をパラメータとして渡す必要があります。これにより、Ionicはreorder group内のDOMノードの並び替えを行わないようになります。
 
+どのようなアプローチを取るにせよ、ループの中でアイテムを提供する場合は、アイテムを並べ替えるための安定したIDを提供する必要があります。つまり、Angularでは `trackBy` を使用し、ReactとVueでは `key` を使用します。
+
 import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';
 
 <UpdatingData />