Skip to content

Commit 3944f9c

Browse files
authored
docs: add modules architecture usage (#3151)
1 parent 22345b1 commit 3944f9c

File tree

1 file changed

+79
-1
lines changed

1 file changed

+79
-1
lines changed

docs/angular/build-options.md

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for
2626

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

29-
### Usage
29+
### Usage with Standalone-based Applications
3030

3131
:::caution
3232
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.
@@ -113,6 +113,84 @@ export class HomePage {
113113
}
114114
```
115115

116+
### Usage with NgModule-based Applications
117+
118+
:::caution
119+
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.
120+
:::
121+
122+
**Bootstrapping and Configuration**
123+
124+
Ionic Angular needs to be configured in the `providers` array of `app.module.ts` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed.
125+
126+
```typescript
127+
import { NgModule } from '@angular/core';
128+
import { BrowserModule } from '@angular/platform-browser';
129+
import { RouteReuseStrategy } from '@angular/router';
130+
131+
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
132+
133+
import { AppComponent } from './app.component';
134+
import { AppRoutingModule } from './app-routing.module';
135+
136+
@NgModule({
137+
declarations: [AppComponent],
138+
imports: [BrowserModule, AppRoutingModule],
139+
providers: [provideIonicAngular(), { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
140+
bootstrap: [AppComponent],
141+
})
142+
export class AppModule {}
143+
```
144+
145+
**Components**
146+
147+
In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array.
148+
149+
```typescript
150+
import { NgModule } from '@angular/core';
151+
import { IonButton, IonContent } from '@ionic/angular/standalone';
152+
import { HomePage } from './home.page';
153+
154+
import { HomePageRoutingModule } from './home-routing.module';
155+
156+
@NgModule({
157+
imports: [IonButton, IonContent, HomePageRoutingModule],
158+
declarations: [HomePage],
159+
})
160+
export class HomePageModule {}
161+
```
162+
163+
**Icons**
164+
165+
The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. The `IonIcon` component should be added in `app.module.ts` just like the other Ionic components.
166+
167+
We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used.
168+
169+
For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated.
170+
171+
```typescript
172+
import { Component } from '@angular/core';
173+
import { addIcons } from 'ionicons';
174+
import { logoIonic } from 'ionicons/icons';
175+
176+
@Component({
177+
selector: 'app-home',
178+
templateUrl: 'home.page.html',
179+
styleUrls: ['home.page.scss'],
180+
})
181+
export class HomePage {
182+
constructor() {
183+
/**
184+
* On Ionicons 7.2+ this icon
185+
* gets mapped to a "logo-ionic" key.
186+
* Alternatively, developers can do:
187+
* addIcons({ 'logo-ionic': logoIonic });
188+
*/
189+
addIcons({ logoIonic });
190+
}
191+
}
192+
```
193+
116194
## Modules
117195

118196
### Overview

0 commit comments

Comments
 (0)