ビルドオプション

開発者は、Ionicコンポーネントを使用するために2つのオプションがあります。スタンドアロンまたはモジュールです。このガイドでは、両方のオプションとそれぞれのメリットとデメリットについて説明します。

スタンドアロンアプローチは新しいもので、より現代的なAngular APIを使用していますが、モジュールアプローチはIonicで引き続きサポートされます。このドキュメントWebサイトのAngularの例の大部分は、モジュールアプローチを使用しています。

スタンドアロン

情報

Ionic UIコンポーネントをAngularスタンドアロンコンポーネントとして使用できるようになりました。Ionic v7.5からサポートされています。

概要

開発者は、Ionicコンポーネントをスタンドアロンコンポーネントとして使用して、ツリーシェイキングと新しいAngular機能を活用できます。このオプションでは、使用するAngularコンポーネントに特定のIonicコンポーネントをインポートします。開発者は、AngularアプリケーションがNgModuleベースであっても、Ionicスタンドアロンコンポーネントを使用できます。

Ionicアプリを更新してIonicスタンドアロンコンポーネントを使用する方法については、スタンドアロン移行ガイドを参照してください。

メリット

1. ツリーシェイキングを有効にするため、最終的なビルド出力にはアプリの実行に必要なコードのみが含まれ、全体のビルドサイズが縮小されます。
2. NgModuleの使用を回避することで、開発エクスペリエンスを簡素化し、コードの理解を容易にします。
3. ESBuildなどの新しいAngular機能の使用を可能にします。

デメリット

1. Ionicコンポーネントは、使用されるすべてのAngularコンポーネントにインポートする必要があるため、設定に時間がかかる可能性があります。

スタンドアロンベースのアプリケーションでの使用

警告

すべてのIonicインポートは、@ionic/angular/standaloneサブモジュールからインポートする必要があります。これには、コンポーネント、ディレクティブ、プロバイダー、タイプなどのインポートが含まれます。@ionic/angularからインポートすると、遅延ロードされたIonicコードがプルインされる可能性があり、ツリーシェイキングに干渉する可能性があります。

ブートストラップと設定

AngularアプリケーションがprovideIonicAngular関数を使用してbootstrapApplicationを呼び出す際に、Ionic Angularを設定する必要があります。開発者は、この関数でオブジェクトとして任意のIonicConfig値を渡すことができます。カスタム設定を渡さない場合でも、provideIonicAngularを呼び出す必要があります。

main.ts

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular({ mode: 'ios' }),
    provideRouter(routes),
  ],
});

コンポーネント

以下の例では、@ionic/angular/standaloneからIonContentとIonButtonをインポートし、コンポーネントテンプレートで使用するためにimportsに渡しています。これらのコンポーネントをインポートしてimports配列に提供しないと、コンパイラエラーが発生します。

home.page.ts

import { Component } from '@angular/core';
import { IonButton, IonContent } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonButton, IonContent],
})
export class HomePage {
  constructor() {}
}

アイコン

アイコンのSVGデータは、Angularコンポーネントで定義する必要があるため、正しくロードできます。開発者は、ioniconsのaddIcons関数を使用して、SVGデータを文字列名にマップできます。その後、開発者は、IonIconのnameプロパティを使用して、文字列名でアイコンを参照できます。

AngularコンポーネントのコンストラクターでaddIconsを呼び出すことをお勧めします。これにより、Angularコンポーネントが使用されている場合にのみデータが追加されます。

Ionicons 7.2以降を使用している開発者の場合、SVGデータのみを渡すと、文字列名が自動的に生成されます。

home.page.ts

import { Component } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { logoIonic } from 'ionicons/icons';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonIcon],
})
export class HomePage {
  constructor() {
    /**
     * On Ionicons 7.2+ this icon
     * gets mapped to a "logo-ionic" key.
     * Alternatively, developers can do:
     * addIcons({ 'logo-ionic': logoIonic });
     */
    addIcons({ logoIonic });
  }
}

アイコンは、app.component.tsなどのエントリポイントにも登録できます。これにより、addIconsを複数回呼び出す必要がなくなります。登録されたアイコンはアプリケーションの起動時にロードする必要があるため、初期アプリケーションチャンクが増加する可能性があることに注意してください。ただし、アプリケーションで使用されるアイコンの数が少ない場合、その影響は最小限になる可能性があります。

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

アプリケーションのエントリポイントに登録されたアイコンは、アプリケーション内のどこからでも名前で参照できます。

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>

ルーティング

IonicコンポーネントでrouterLink、routerAction、またはrouterDirectionを使用する開発者は、IonRouterLinkディレクティブをインポートする必要があります。アンカー（<a>）要素でこれらのルーティング機能を使用する開発者は、代わりにIonRouterLinkWithHrefをインポートする必要があります。

home.page.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonButton, IonRouterLink } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [
    IonButton,
    RouterLink, // required to get base routerLink behavior for @angular/router
    IonRouterLink, // use IonRouterLinkWithHref if you are using an <a> element instead
  ],
})
export class HomePage {}

home.page.html

<ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>

テスト

Ionic AngularのスタンドアロンコンポーネントはESモジュールを使用します。そのため、Jestを使用している開発者は、Jestで使用できる形式にESモジュールを変換する必要があります。Jestを使用している開発者は、次のものをJestの設定に追加する必要があります。

npm

"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]

pnpm

"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]

NgModuleベースのアプリケーションでの使用

警告

すべてのIonicインポートは、@ionic/angular/standaloneサブモジュールからインポートする必要があります。これには、コンポーネント、ディレクティブ、プロバイダー、タイプなどのインポートが含まれます。@ionic/angularからインポートすると、遅延ロードされたIonicコードがプルインされる可能性があり、ツリーシェイキングに干渉する可能性があります。

ブートストラップと設定

provideIonicAngular関数を使用して、app.module.tsのproviders配列でIonic Angularを設定する必要があります。開発者は、この関数でオブジェクトとして任意のIonicConfig値を渡すことができます。カスタム設定を渡さない場合でも、provideIonicAngularを呼び出す必要があります。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [provideIonicAngular(), { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

コンポーネント

以下の例では、@ionic/angular/standaloneからIonContentとIonButtonをインポートし、コンポーネントテンプレートで使用するためにAngularコンポーネントのNgModuleのimports配列に渡しています。これらのコンポーネントをインポートしてimports配列に提供しないと、コンパイラエラーが発生します。

home.module.ts

import { NgModule } from '@angular/core';
import { IonButton, IonContent } from '@ionic/angular/standalone';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  imports: [IonButton, IonContent, HomePageRoutingModule],
  declarations: [HomePage],
})
export class HomePageModule {}

アイコン

アイコンのSVGデータは、Angularコンポーネントで定義する必要があるため、正しくロードできます。開発者は、ioniconsのaddIcons関数を使用して、SVGデータを文字列名にマップできます。その後、開発者は、IonIconのnameプロパティを使用して、文字列名でアイコンを参照できます。IonIconコンポーネントは、他のIonicコンポーネントと同様にapp.module.tsに追加する必要があります。

AngularコンポーネントのコンストラクターでaddIconsを呼び出すことをお勧めします。これにより、Angularコンポーネントが使用されている場合にのみデータが追加されます。

Ionicons 7.2以降を使用している開発者の場合、SVGデータのみを渡すと、文字列名が自動的に生成されます。

home.page.ts

import { Component } from '@angular/core';
import { addIcons } from 'ionicons';
import { logoIonic } from 'ionicons/icons';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() {
    /**
     * On Ionicons 7.2+ this icon
     * gets mapped to a "logo-ionic" key.
     * Alternatively, developers can do:
     * addIcons({ 'logo-ionic': logoIonic });
     */
    addIcons({ logoIonic });
  }
}

アイコンは、app.component.tsなどのエントリポイントにも登録できます。これにより、addIconsを複数回呼び出す必要がなくなります。登録されたアイコンはアプリケーションの起動時にロードする必要があるため、初期アプリケーションチャンクが増加する可能性があることに注意してください。ただし、アプリケーションで使用されるアイコンの数が少ない場合、その影響は最小限になる可能性があります。

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

アプリケーションのエントリポイントに登録されたアイコンは、アプリケーション内のどこからでも名前で参照できます。

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>

ルーティング

IonicコンポーネントでrouterLink、routerAction、またはrouterDirectionを使用する開発者は、IonRouterLinkディレクティブをインポートする必要があります。アンカー（<a>）要素でこれらのルーティング機能を使用する開発者は、代わりにIonRouterLinkWithHrefをインポートする必要があります。

home.module.ts

import { NgModule } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonButton, IonRouterLink } from '@ionic/angular/standalone';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  imports: [
    IonButton,
    RouterLink, // required to get base routerLink behavior for @angular/router
    IonRouterLink, // use IonRouterLinkWithHref if you are using an <a> element instead
    HomePageRoutingModule,
  ],
  declarations: [HomePage],
})
export class HomePageModule {}

home.page.html

<ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>

テスト

Ionic AngularのスタンドアロンコンポーネントはESモジュールを使用します。そのため、Jestを使用している開発者は、Jestで使用できる形式にESモジュールを変換する必要があります。Jestを使用している開発者は、次のものをJestの設定に追加する必要があります。

npm

"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]

pnpm

"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]

モジュール

概要

開発者は、app.module.tsのimports配列でIonicModuleをインポートし、IonicModule.forRoot()を呼び出すことによっても、モジュールアプローチを使用できます。これにより、Ionicコンポーネントがランタイム時に遅延ロードされるIonicのバージョンが登録されます。

メリット

1. コンポーネントは必要に応じて遅延ロードされるため、開発者は各Ionicコンポーネントを手動でインポートして登録する時間を節約できます。

デメリット

1. Ionicコンポーネントを遅延ロードすると、コンパイラはビルド時にどのコンポーネントが必要であるかを認識しません。つまり、最終的なアプリケーションバンドルは必要なものよりもはるかに大きくなる可能性があります。
2. ESBuildなどの新しいAngular機能を使用することはできません。

使用方法

以下の例では、IonicModuleを使用して、Ionicの遅延ロードバージョンを作成しています。その後、明示的にインポートする必要なく、任意のIonicコンポーネントを参照できます。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot()],
  bootstrap: [AppComponent],
})
export class AppModule {}

モジュールからスタンドアロンへの移行

ヒント

スタンドアロンへの移行には、自動化ユーティリティをお試しください！

開始方法については、https://github.com/ionic-team/ionic-angular-standalone-codemods を参照してください。移行ユーティリティに関するすべての問題は、リンク先のレポジトリに報告してください。

スタンドアロンオプションはモジュールオプションよりも新しいため、開発者はアプリケーションの開発中に切り替えることを検討するかもしれません。このガイドでは、移行に必要な手順を詳細に説明します。

Ionicスタンドアロンコンポーネントへの移行は、一度にすべて行う必要があり、段階的に行うことはできません。モジュール方式とスタンドアロン方式では、同時に使用できない2つの異なるIonicビルドシステムを使用します。

開発者には自動移行ユーティリティの使用を推奨しますが、手動でアプリケーションを移行することもできます。

スタンドアロンベースのアプリケーション

Angularアプリケーションが既にスタンドアロンアーキテクチャを使用しており、Ionic UIコンポーネントもスタンドアロンコンポーネントとして使用したい場合は、次の手順に従ってください。

1. npm install @ionic/angular@latest を実行して、Ionicの最新バージョンを実行していることを確認します。Ionic UIスタンドアロンコンポーネントは、Ionic v7.5以降でサポートされています。

2. npm install ionicons@latest を実行して、Ioniconsの最新バージョンを実行していることを確認します。Ionicons v7.2では、スタンドアロンコンポーネントでアイコンを使用するために必要なコードの冗長性を削減する、使いやすさの向上が導入されています。

3. main.ts内のIonicModule呼び出しを、@ionic/angular/standaloneからインポートされたprovideIonicAngularに置き換えます。IonicModule.forRootに渡された構成は、この新しい関数にオブジェクトとして渡すことができます。

main.ts

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
- import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    /**
     * The custom config serves as an example
     * of how to pass a config to provideIonicAngular.
     * You do not need to set "mode: 'ios'" to
     * use Ionic standalone components.
     */
-   importProvidersFrom(IonicModule.forRoot({ mode: 'ios' })),
+   provideIonicAngular({ mode: 'ios' }),
    provideRouter(routes),
  ],
});

4. アプリケーションの他の場所にあるIonicModuleへの参照をすべて削除します。

5. @ionic/angularからの既存のインポートをすべて、代わりに@ionic/angular/standaloneからインポートするように更新します。

- import { Platform } from '@ionic/angular';
+ import { Platform } from '@ionic/angular/standalone';

6. 使用されているAngularコンポーネントごとに、各Ionicコンポーネントのインポートを追加します。インポートをAngularコンポーネントのimports配列に渡すことを確認してください。

app.component.ts

import { Component } from '@angular/core';
+ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  standalone: true,
+ imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {
  constructor() {}
}

7. Ioniconsを使用している場合、addIconsを使用して各Angularコンポーネントで使用されるアイコンのSVGデータ定義します。これにより、コンポーネントテンプレートで文字列名を使用してアイコンを参照し続けることができます。追加されたアイコンについても、これを行う必要があることに注意してください。

test.component.ts

import { Component } from '@angular/core';
+ import { IonIcon } from '@ionic/angular/standalone';
+ import { addIcons } from 'ionicons';
+ import { alarm, logoIonic } from 'ionicons/icons';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  standalone: true,
+ imports: [IonIcon],
})
export class TestComponent {
  constructor() {
+   addIcons({ alarm, logoIonic });
  }
}

8. 存在する場合は、angular.jsonファイルから次のコードを削除します。複数回表示される可能性があることに注意してください。

angular.json

- {
-   "glob": "**/*.svg",
-   "input": "node_modules/ionicons/dist/ionicons/svg",
-   "output": "./svg"
- }

9. routerLink、routerDirection、またはrouterActionを使用している場合は、IonicコンポーネントにはIonRouterLinkディレクティブ、<a>要素にはIonRouterLinkWithHrefディレクティブをインポートすることを確認してください。

test.component.ts

import { Component } from '@angular/core';
- import { IonButton } from '@ionic/angular/standalone';
+ import { IonButton, IonRouterLink } from '@ionic/angular/standalone';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  standalone: true,
  imports: [
    IonButton,
+   IonRouterLink
  ],
})
export class TestComponent {}

10. VSCodeを使用している場合は、インポートの推奨事項について@ionic/angular/commonおよび@ionic/angularモジュール指定子を無視することをお勧めします。

.vscode/settings.json

{
  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
}

NgModuleベースのアプリケーション

AngularアプリケーションがまだNgModuleアーキテクチャを使用しており、Ionic UIコンポーネントをスタンドアロンコンポーネントとして採用したい場合は、次の手順に従ってください。

1. npm install @ionic/angular@latest を実行して、Ionicの最新バージョンを実行していることを確認します。Ionic UIスタンドアロンコンポーネントは、Ionic v7.5以降でサポートされています。

2. npm install ionicons@latest を実行して、Ioniconsの最新バージョンを実行していることを確認します。Ionicons v7.2では、スタンドアロンコンポーネントでアイコンを使用するために必要なコードの冗長性を削減する、使いやすさの向上が導入されています。

3. app.module.ts内のIonicModule呼び出しを、@ionic/angular/standaloneからインポートされたprovideIonicAngularに置き換えます。IonicModule.forRootに渡された構成は、この新しい関数にオブジェクトとして渡すことができます。

app.module.ts

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
- import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

@NgModule({
  declarations: [AppComponent],
- imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios' }), AppRoutingModule],
+ imports: [BrowserModule, AppRoutingModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    /**
     * The custom config serves as an example
     * of how to pass a config to provideIonicAngular.
     * You do not need to set "mode: 'ios'" to
     * use Ionic standalone components.
     */
+   provideIonicAngular({ mode: 'ios' }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

4. アプリケーションの他の場所にあるIonicModuleへの参照をすべて削除します。

5. @ionic/angularからの既存のインポートをすべて、代わりに@ionic/angular/standaloneからインポートするように更新します。

- import { Platform } from '@ionic/angular';
+ import { Platform } from '@ionic/angular/standalone';

6. 使用されているAngularコンポーネントのNgModuleごとに、各Ionicコンポーネントのインポートを追加します。コンポーネントをモジュールのimports配列に渡すことを確認してください。

app.module.ts

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';
+ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular/standalone';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

@NgModule({
  declarations: [AppComponent],
- imports: [BrowserModule, AppRoutingModule],
+ imports: [BrowserModule, AppRoutingModule, IonApp, IonRouterOutlet],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular({ mode: 'ios' })
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

たとえば、Ionicコンポーネントを使用しているすべてのモジュールでは、コンポーネントモジュールにIonicコンポーネントをインポートする必要があります。

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

+ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HomePageRoutingModule,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

7. Ioniconsを使用している場合、addIconsを使用して各Angularコンポーネントで使用されるアイコンのSVGデータ定義します。これにより、コンポーネントテンプレートで文字列名を使用してアイコンを参照し続けることができます。追加されたアイコンについても、これを行う必要があることに注意してください。IonIconコンポーネントは、NgModuleで引き続き提供する必要があります。

test.component.ts

import { Component } from '@angular/core';
+ import { addIcons } from 'ionicons';
+ import { alarm, logoIonic } from 'ionicons/icons';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class TestComponent {
  constructor() {
+   addIcons({ alarm, logoIonic });
  }
}

test.module.ts

import { NgModule } from '@angular/core';
import { TestComponent } from './test.component';
+ import { IonIcon } from '@ionic/angular/standalone';

@NgModule({
  imports: [
+   IonIcon,
  ],
  declarations: [TestComponent]
})
export class TestComponentModule {}

8. 存在する場合は、angular.jsonファイルから次のコードを削除します。複数回表示される可能性があることに注意してください。

angular.json

- {
-   "glob": "**/*.svg",
-   "input": "node_modules/ionicons/dist/ionicons/svg",
-   "output": "./svg"
- }

9. routerLink、routerDirection、またはrouterActionを使用している場合は、IonicコンポーネントにはIonRouterLinkディレクティブ、<a>要素にはIonRouterLinkWithHrefディレクティブをインポートすることを確認してください。

test.module.ts

import { NgModule } from '@angular/core';
import { TestComponent } from './test.component';
- import { IonButton } from '@ionic/angular/standalone';
+ import { IonButton, IonRouterLink } from '@ionic/angular/standalone';

@NgModule({
  imports: [
    IonButton,
+   IonRouterLink,
  ],
  declarations: [TestComponent]
})

10. VSCodeを使用している場合は、インポートの推奨事項について@ionic/angular/commonおよび@ionic/angularモジュール指定子を無視することをお勧めします。

.vscode/settings.json

{
  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"]
}