You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/angular/build-options.md
+79-1Lines changed: 79 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -26,7 +26,7 @@ See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for
26
26
27
27
1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up.
28
28
29
-
### Usage
29
+
### Usage with Standalone-based Applications
30
30
31
31
:::caution
32
32
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 {
113
113
}
114
114
```
115
115
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.
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.
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.
0 commit comments