Skip to content

Commit 4a54f37

Browse files
committed
chore: format item
1 parent c089c8b commit 4a54f37

File tree

2 files changed

+11
-294
lines changed

2 files changed

+11
-294
lines changed

content/performance/lazy-load-animations.md

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ title: lazy load animation providers
44

55
# Problem
66

7-
The [animations package](https://angular.dev/guide/animations) is used by Angular to add motion in your application.
8-
You can add it with `provideAnimations()` to your **app.config.ts** file:
7+
Angular uses the [animations package](https://angular.dev/guide/animations) to add motion to your application.
8+
To enable animations, add the `provideAnimations()` call to your `app.config.ts` file:
99

1010
```typescript
11-
import {provideAnimations} from "@angular/platform-browser/animations";
11+
import { provideAnimations } from '@angular/platform-browser/animations';
1212

1313
export const appConfig: ApplicationConfig = {
1414
providers: [
@@ -21,14 +21,12 @@ export const appConfig: ApplicationConfig = {
2121
However, this will eagerly load the animations package with the main bundle, which can slow down the initial load time of your application.
2222
The unminified size of the animations package is around **65kb**, which is not a lot, but it can add up with other packages.
2323

24-
2524
# Solution
2625

27-
Starting with Angular **17.0.0**, you can now lazy load the animation package.
28-
You can change the way you provide the animations package in favor of `provideAnimationsAsync()`:
26+
Starting with Angular **17.0.0**, you can now lazy load the animation package. You can change the way you provide the animations package in favor of `provideAnimationsAsync()`:
2927

3028
```typescript
31-
import {provideAnimationsAsync} from "@angular/platform-browser/animations";
29+
import { provideAnimationsAsync } from '@angular/platform-browser/animations';
3230

3331
export const appConfig: ApplicationConfig = {
3432
providers: [
@@ -38,9 +36,8 @@ export const appConfig: ApplicationConfig = {
3836
};
3937
```
4038

41-
> **Note:** This behavior will only work if you use the animations in lazy loaded components. Otherwise, the animations will be eagerly loaded with the main bundle.
39+
**Note:** This behavior will only work if you use the animations in lazy loaded components. Otherwise, the animations will be eagerly loaded with the main bundle.
4240

4341
# Resources
4442

45-
- [Lazy-loading Angular's animation module](https://riegler.fr/blog/2023-10-04-animations-async) by Matthieu Riegler
46-
43+
- [Lazy-loading Angular's animation module](https://riegler.fr/blog/2023-10-04-animations-async) by [Matthieu Riegler](https://twitter.com/Jean__Meche)

0 commit comments

Comments
 (0)