Skip to content

Commit ca7ce53

Browse files
docs(angular): add a section to standalone migration for migrating components (#3176)
1 parent beacdbd commit ca7ce53

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

docs/angular/build-options.md

+27
Original file line numberDiff line numberDiff line change
@@ -490,6 +490,33 @@ if (environment.production) {
490490
export class AppModule {}
491491
```
492492

493+
For example, all modules that are using Ionic components need to have the Ionic components imported in their component module.
494+
495+
```diff title="home.module.ts"
496+
import { NgModule } from '@angular/core';
497+
import { CommonModule } from '@angular/common';
498+
import { FormsModule } from '@angular/forms';
499+
import { HomePage } from './home.page';
500+
501+
import { HomePageRoutingModule } from './home-routing.module';
502+
503+
+ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
504+
505+
@NgModule({
506+
imports: [
507+
CommonModule,
508+
FormsModule,
509+
HomePageRoutingModule,
510+
+ IonContent,
511+
+ IonHeader,
512+
+ IonTitle,
513+
+ IonToolbar
514+
],
515+
declarations: [HomePage]
516+
})
517+
export class HomePageModule {}
518+
```
519+
493520
7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. The `IonIcon` component should still be provided in the NgModule.
494521

495522
```diff title="test.component.ts"

0 commit comments

Comments
 (0)