Build Options

Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach.

While the Standalone approach is newer and makes use of more modern Angular APIs, the Modules approach will continue to be supported in Ionic. Most of the Angular examples on this documentation website use the Modules approach.

Standalone

備考

Ionic UI components as Angular standalone components is supported starting in Ionic v7.5.

Overview

Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based.

See the Standalone Migration Guide for instructions on how to update your Ionic app to make use of Ionic standalone components.

Benefits

1. Enables treeshaking so the final build output only includes the code necessary to run your app which reduces overall build size.
2. Avoids the use of NgModules to streamline the development experience and make your code easier to understand.
3. Allows developers to also use newer Angular features such as ESBuild.

Drawbacks

1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up.

Usage with Standalone-based Applications

注意

All Ionic imports should be imported from the @ionic/angular/standalone submodule. This includes imports such as components, directives, providers, and types. Importing from @ionic/angular may pull in lazy loaded Ionic code which can interfere with treeshaking.

Bootstrapping and Configuration

Ionic Angular needs to be configured when the Angular application calls bootstrapApplication using the provideIonicAngular function. Developers can pass any IonicConfig values as an object in this function. Note that provideIonicAngular needs to be called even if no custom config is passed.

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';

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

Components

In the example below, we are importing IonContent and IonButton from @ionic/angular/standalone and passing them to imports for use in the component template. We would get a compiler error if these components were not imported and provided to the imports array.

home.page.ts

import { Component } from '@angular/core';