建置選項

開發人員有兩種使用 Ionic 元件的選項：獨立式或模組。本指南涵蓋這兩種選項，以及每種方法的優點和缺點。

雖然獨立式方法較新且使用較現代的 Angular API，但 Ionic 將繼續支援模組方法。本文件網站上的大多數 Angular 範例都使用模組方法。

獨立式

資訊

從 Ionic v7.5 開始支援將 Ionic UI 元件作為 Angular 獨立式元件。

概觀

開發人員可以使用 Ionic 元件作為獨立式元件，以利用 tree shaking 和較新的 Angular 功能。此選項涉及將特定的 Ionic 元件匯入您想要使用它們的 Angular 元件中。即使他們的 Angular 應用程式是基於 NgModule 的，開發人員也可以使用 Ionic 獨立式元件。

請參閱獨立式遷移指南，以取得關於如何更新您的 Ionic 應用程式以利用 Ionic 獨立式元件的說明。

優點

1. 啟用 tree shaking，因此最終建置輸出僅包含執行您的應用程式所需的程式碼，從而減少整體建置大小。
2. 避免使用 NgModule 來簡化開發體驗並使您的程式碼更容易理解。
3. 允許開發人員也使用較新的 Angular 功能，例如ESBuild。

缺點

1. Ionic 元件需要匯入到每個使用它們的 Angular 元件中，這可能需要花費時間進行設定。

與獨立式應用程式一起使用

警告

所有 Ionic 匯入都應從 @ionic/angular/standalone 子模組匯入。這包括元件、指令、供應商和類型等匯入。從 @ionic/angular 匯入可能會引入延遲載入的 Ionic 程式碼，這可能會干擾 tree shaking。

引導和設定

當 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 元件 constructor 中呼叫 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 的開發人員應確保 ES 模組被轉換為 Jest 可以使用的格式。使用 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 程式碼，這可能會干擾 tree shaking。

引導和設定

Ionic Angular 需要在 app.module.ts 的 providers 陣列中使用 provideIonicAngular 函式進行設定。開發人員可以在此函式中以物件形式傳遞任何 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 屬性，依其字串名稱來參照圖示。應像其他 Ionic 元件一樣，將 IonIcon 元件新增至 app.module.ts 中。

我們建議在 Angular 元件 constructor 中呼叫 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 的開發人員應確保 ES 模組被轉換為 Jest 可以使用的格式。使用 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. 開發人員無法使用較新的 Angular 功能，例如 ESBuild。

用法

在下面的範例中，我們使用 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 獨立元件必須一次完成，不能逐步進行。模組和獨立元件方法使用兩種不同的 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"]
}