docs(animations): update animation docs to be standalone first (#51390)

Update the animation example files to be standalone and use boostrap application, update the documentation to prioritize standalone

PR Close #51390

aio/content/examples/animations/src/app/about.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.css']

aio/content/examples/animations/src/app/animations.ts

@@ -31,15 +31,15 @@ export const slideInAnimation =
 // #docregion query
       query(':enter', [
         style({ left: '-100%' })
-      ]),
-      query(':leave', animateChild()),
+      ], { optional: true }),
+      query(':leave', animateChild(), { optional: true }),
       group([
         query(':leave', [
           animate('300ms ease-out', style({ left: '100%' }))
-        ]),
+        ], { optional: true }),
         query(':enter', [
           animate('300ms ease-out', style({ left: '0%' }))
-        ]),
+        ], { optional: true }),
       ]),
     ]),
     transition('* <=> *', [
@@ -51,19 +51,19 @@ export const slideInAnimation =
           left: 0,
           width: '100%'
         })
-      ]),
+      ], { optional: true }),
       query(':enter', [
         style({ left: '-100%' })
-      ]),
-      query(':leave', animateChild()),
+      ], { optional: true }),
+      query(':leave', animateChild(), { optional: true }),
       group([
         query(':leave', [
           animate('200ms ease-out', style({ left: '100%', opacity: 0 }))
-        ]),
+        ], { optional: true }),
         query(':enter', [
           animate('300ms ease-out', style({ left: '0%' }))
-        ]),
-        query('@*', animateChild())
+        ], { optional: true }),
+        query('@*', animateChild(), { optional: true })
       ]),
     ])
     // #enddocregion query

aio/content/examples/animations/src/app/app.component.1.ts

@@ -2,6 +2,7 @@
 import { Component, HostBinding } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css'],

aio/content/examples/animations/src/app/app.component.ts

@@ -11,14 +11,16 @@ import {
 } from '@angular/animations';
 
 // #enddocregion imports
-import { ChildrenOutletContexts, RouterOutlet } from '@angular/router';
+import { ChildrenOutletContexts, RouterLink, RouterOutlet } from '@angular/router';
 import { slideInAnimation } from './animations';
 
 // #docregion decorator, toggle-app-animations, define
 @Component({
+  standalone: true,
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css'],
+  imports: [RouterLink, RouterOutlet],
   animations: [
 // #enddocregion decorator
     slideInAnimation

aio/content/examples/animations/src/app/app.config.ts

@@ -0,0 +1,15 @@
+import { ApplicationConfig } from '@angular/core';
+import { routes } from './app.routes';
+import { provideRouter } from '@angular/router';
+import { provideProtractorTestingSupport } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        // needed for supporting e2e tests
+        provideProtractorTestingSupport(),
+        provideRouter(routes),
+        provideAnimations(),
+    ]
+};

aio/content/examples/animations/src/app/app.routes.ts

@@ -1,112 +1,73 @@
-// #docregion route-animation-data
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
-import { OpenCloseComponent } from './open-close.component';
+import { Routes } from '@angular/router';
 import { OpenClosePageComponent } from './open-close-page.component';
-import { OpenCloseChildComponent } from './open-close.component.4';
-import { ToggleAnimationsPageComponent } from './toggle-animations-page.component';
-import { StatusSliderComponent } from './status-slider.component';
 import { StatusSliderPageComponent } from './status-slider-page.component';
+import { ToggleAnimationsPageComponent } from './toggle-animations-page.component';
 import { HeroListPageComponent } from './hero-list-page.component';
 import { HeroListGroupPageComponent } from './hero-list-group-page.component';
-import { HeroListGroupsComponent } from './hero-list-groups.component';
 import { HeroListEnterLeavePageComponent } from './hero-list-enter-leave-page.component';
-import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
 import { HeroListAutoCalcPageComponent } from './hero-list-auto-page.component';
-import { HeroListAutoComponent } from './hero-list-auto.component';
-import { HomeComponent } from './home.component';
-import { AboutComponent } from './about.component';
 import { InsertRemoveComponent } from './insert-remove.component';
 import { QueryingComponent } from './querying.component';
+import { HomeComponent } from './home.component';
+import { AboutComponent } from './about.component';
 
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    RouterModule.forRoot([
-      { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
-      {
+// #docregion route-animation-data
+export const routes: Routes = [
+    { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
+    {
         path: 'open-close',
         component: OpenClosePageComponent,
         data: { animation: 'openClosePage' }
-      },
-      {
+    },
+    {
         path: 'status',
         component: StatusSliderPageComponent,
         data: { animation: 'statusPage' }
-      },
-      {
+    },
+    {
         path: 'toggle',
         component: ToggleAnimationsPageComponent,
         data: { animation: 'togglePage' }
-      },
-      {
+    },
+    {
         path: 'heroes',
         component: HeroListPageComponent,
         data: { animation: 'filterPage' }
-      },
-      {
+    },
+    {
         path: 'hero-groups',
         component: HeroListGroupPageComponent,
         data: { animation: 'heroGroupPage' }
-      },
-      {
+    },
+    {
         path: 'enter-leave',
         component: HeroListEnterLeavePageComponent,
         data: { animation: 'enterLeavePage' }
-      },
-      {
+    },
+    {
         path: 'auto',
         component: HeroListAutoCalcPageComponent,
         data: { animation: 'autoPage' }
-      },
-      {
+    },
+    {
         path: 'insert-remove',
         component: InsertRemoveComponent,
         data: { animation: 'insertRemovePage' }
-      },
-      {
+    },
+    {
         path: 'querying',
         component: QueryingComponent,
         data: { animation: 'queryingPage' }
-      },
-      {
+    },
+    {
         path: 'home',
         component: HomeComponent,
         data: { animation: 'HomePage' }
-      },
-      {
+    },
+    {
         path: 'about',
         component: AboutComponent,
         data: { animation: 'AboutPage' }
-      },
-    ])
-  ],
-  // #enddocregion route-animation-data
-  declarations: [
-    AppComponent,
-    StatusSliderComponent,
-    OpenCloseComponent,
-    OpenCloseChildComponent,
-    OpenClosePageComponent,
-    StatusSliderPageComponent,
-    ToggleAnimationsPageComponent,
-    HeroListPageComponent,
-    HeroListGroupsComponent,
-    HeroListGroupPageComponent,
-    HeroListEnterLeavePageComponent,
-    HeroListEnterLeaveComponent,
-    HeroListAutoCalcPageComponent,
-    HeroListAutoComponent,
-    HomeComponent,
-    InsertRemoveComponent,
-    QueryingComponent,
-    AboutComponent
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+    },
+];
+// #enddocregion route-animation-data

aio/content/examples/animations/src/app/hero-list-auto-page.component.ts

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { HEROES } from './mock-heroes';
+import { HeroListAutoComponent } from './hero-list-auto.component';
 
 @Component({
+  standalone: true,
   selector: 'app-hero-list-auto-page',
   template: `
     <section>
@@ -9,7 +11,8 @@ import { HEROES } from './mock-heroes';
 
       <app-hero-list-auto [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-auto>
     </section>
-  `
+  `,
+  imports: [HeroListAutoComponent]
 })
 export class HeroListAutoCalcPageComponent {
   heroes = HEROES.slice();

aio/content/examples/animations/src/app/hero-list-auto.component.ts

@@ -13,11 +13,14 @@ import {
 } from '@angular/animations';
 
 import { Hero } from './hero';
+import { NgFor } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'app-hero-list-auto',
   templateUrl: 'hero-list-auto.component.html',
   styleUrls: ['./hero-list-page.component.css'],
+  imports: [NgFor],
   // #docregion auto-calc
   animations: [
     trigger('shrinkOut', [

aio/content/examples/animations/src/app/hero-list-enter-leave-page.component.ts

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { HEROES } from './mock-heroes';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
 
 @Component({
+  standalone: true,
   selector: 'app-hero-list-enter-leave-page',
   template: `
     <section>
@@ -9,7 +11,8 @@ import { HEROES } from './mock-heroes';
 
       <app-hero-list-enter-leave [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-enter-leave>
     </section>
-  `
+  `,
+  imports: [HeroListEnterLeaveComponent]
 })
 export class HeroListEnterLeavePageComponent {
   heroes = HEROES.slice();

aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts

@@ -13,8 +13,10 @@ import {
 } from '@angular/animations';
 
 import { Hero } from './hero';
+import { NgFor } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'app-hero-list-enter-leave',
   template: `
     <ul class="heroes">
@@ -28,6 +30,7 @@ import { Hero } from './hero';
     </ul>
   `,
   styleUrls: ['./hero-list-page.component.css'],
+  imports: [NgFor],
   // #docregion animationdef
   animations: [
     trigger('flyInOut', [

aio/content/examples/animations/src/app/hero-list-group-page.component.ts

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { HEROES } from './mock-heroes';
+import { HeroListGroupsComponent } from './hero-list-groups.component';
 
 @Component({
+  standalone: true,
   selector: 'app-hero-list-groups-page',
   template: `
     <section>
@@ -9,7 +11,8 @@ import { HEROES } from './mock-heroes';
 
       <app-hero-list-groups [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-groups>
     </section>
-  `
+  `,
+  imports: [HeroListGroupsComponent]
 })
 export class HeroListGroupPageComponent {
   heroes = HEROES.slice();

aio/content/examples/animations/src/app/hero-list-groups.component.ts

@@ -14,8 +14,10 @@ import {
 } from '@angular/animations';
 
 import { Hero } from './hero';
+import { NgFor } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'app-hero-list-groups',
   template: `
     <ul class="heroes">
@@ -28,6 +30,7 @@ import { Hero } from './hero';
     </ul>
   `,
   styleUrls: ['./hero-list-page.component.css'],
+  imports: [NgFor],
   // #docregion animationdef
   animations: [
     trigger('flyInOut', [

aio/content/examples/animations/src/app/hero-list-page.component.ts

@@ -4,10 +4,13 @@ import { Component, HostBinding, OnInit } from '@angular/core';
 import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
 import { HEROES } from './mock-heroes';
 import { Hero } from './hero';
+import { NgFor } from '@angular/common';
 
 // #docregion filter-animations
 @Component({
 // #enddocregion filter-animations
+  standalone: true,
+  imports: [NgFor],
   selector: 'app-hero-list-page',
   templateUrl: 'hero-list-page.component.html',
   styleUrls: ['hero-list-page.component.css'],

aio/content/examples/animations/src/app/home.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']

aio/content/examples/animations/src/app/insert-remove.component.ts

@@ -1,9 +1,12 @@
 // #docplaster
 import { Component } from '@angular/core';
 import { trigger, transition, animate, style } from '@angular/animations';
+import { NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'app-insert-remove',
+  imports: [NgIf],
   animations: [
 // #docregion enter-leave-trigger
     trigger('myInsertRemoveTrigger', [

aio/content/examples/animations/src/app/open-close-page.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
+import { OpenCloseComponent } from './open-close.component';
 
 @Component({
+  standalone: true,
   selector: 'app-open-close-page',
   template: `
     <section>
@@ -10,7 +12,8 @@ import { Component } from '@angular/core';
 
       <app-open-close [logging]="logging"></app-open-close>
     </section>
-  `
+  `,
+  imports: [OpenCloseComponent]
 })
 export class OpenClosePageComponent {
   logging = false;

aio/content/examples/animations/src/app/open-close.component.1.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, transition, state, animate, style, keyframes } from '@angular/animations';
 
 @Component({
+  standalone: true,
   selector: 'app-open-close',
   animations: [
 // #docregion trigger

aio/content/examples/animations/src/app/open-close.component.2.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, transition, state, animate, style } from '@angular/animations';
 
 @Component({
+  standalone: true,
   selector: 'app-open-close-boolean',
 // #docregion trigger-boolean
   animations: [

aio/content/examples/animations/src/app/open-close.component.3.ts

@@ -5,6 +5,7 @@ import { transition, trigger, useAnimation } from '@angular/animations';
 import { transitionAnimation } from './animations';
 
 @Component({
+  standalone: true,
   selector: 'app-open-close-reusable',
   animations: [
     trigger('openClose', [

aio/content/examples/animations/src/app/open-close.component.4.ts

@@ -6,6 +6,7 @@ import { trigger, transition, state, animate, style } from '@angular/animations'
 // #docregion toggle-animation
 @Component({
 // #enddocregion toggle-animation
+  standalone: true,
   selector: 'app-open-close-toggle',
   templateUrl: 'open-close.component.4.html',
   styleUrls: ['open-close.component.css'],

aio/content/examples/animations/src/app/open-close.component.ts

@@ -4,6 +4,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 
 // #docregion component, events1
 @Component({
+  standalone: true,
   selector: 'app-open-close',
 // #docregion trigger-wildcard1, trigger-transition
   animations: [

aio/content/examples/animations/src/app/querying.component.ts

@@ -13,8 +13,10 @@ import {
 } from '@angular/animations';
 
 import { HEROES } from './mock-heroes';
+import { NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'app-querying',
   template: `
     <nav>
@@ -31,6 +33,7 @@ import { HEROES } from './mock-heroes';
     </section>
   `,
   styleUrls: ['./querying.component.css'],
+  imports: [NgIf],
   animations: [
     trigger('query', [
       transition(':enter', [

aio/content/examples/animations/src/app/status-slider-page.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
+import { StatusSliderComponent } from './status-slider.component';
 
 @Component({
+  standalone: true,
   selector: 'app-status-slider-page',
   template: `
     <section>
       <h2>Status Slider</h2>
       <app-status-slider></app-status-slider>
     </section>
-  `
+  `,
+  imports: [StatusSliderComponent]
 })
 export class StatusSliderPageComponent {}

aio/content/examples/animations/src/app/status-slider.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, transition, state, animate, style, keyframes } from '@angular/animations';
 
 @Component({
+  standalone: true,
   selector: 'app-status-slider',
   templateUrl: 'status-slider.component.html',
   styleUrls: ['status-slider.component.css'],

aio/content/examples/animations/src/app/toggle-animations-page.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
+import { OpenCloseChildComponent } from './open-close.component.4';
 
 @Component({
+  standalone: true,
   selector: 'app-toggle-animations-child-page',
   template: `
     <section>
@@ -8,6 +10,7 @@ import { Component } from '@angular/core';
 
       <app-open-close-toggle></app-open-close-toggle>
     </section>
-  `
+  `,
+  imports: [OpenCloseChildComponent]
 })
 export class ToggleAnimationsPageComponent {}

aio/content/examples/animations/src/main.ts

@@ -1,6 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig);

aio/content/guide/add-an-animation.md

@@ -1,23 +1,25 @@
 # Add an animation
 
 The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
-When you create a new project using the Angular framework, these dependencies are automatically added to your project.
 
 To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular capability.
 
 ## Step 1: Enabling the animations module
 
-Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+Import `provideAnimations` from `@angular/platform-browser/animations` and add it to the providers list in the `bootstrapApplication` function call.
+
+```ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnimations(),
+  ]
+});
+```
+
+For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
 
 <code-example header="src/app/app.module.ts" path="animations/src/app/app.module.1.ts"></code-example>
 
-<div class="alert is-helpful">
-
-**NOTE**: <br />
-When you use the Angular framework to create your application, the root application module `app.module.ts` is placed in the `src/app` directory.  If you are using standalone components, look at main.ts or look at your root application component.
-
-</div>
-
 ## Step 2: Importing animation functions into component files
 
 If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
@@ -31,4 +33,4 @@ You put the trigger that defines an animation within the `animations` metadata p
 
 <code-example header="src/app/app.component.ts" path="animations/src/app/app.component.ts" region="decorator"></code-example>
 
-@reviewed 2022-12-19
+@reviewed 2023-08-15

aio/content/guide/animations.md

@@ -32,13 +32,21 @@ The guide assumes that you're familiar with building basic Angular apps, as desc
 ## Getting started
 
 The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`.
-When you create a new project using the CLI, these dependencies are automatically added to your project.
 
 To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.
 
 ### Step 1: Enabling the animations module
 
-Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
+Import `provideAnimations` from `@angular/platform-browser/animations` and add it to the providers list in the `bootstrapApplication` function call.
+```ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnimations(),
+  ]
+});
+```
+
+For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
 
 <code-example header="src/app/app.module.ts" path="animations/src/app/app.module.1.ts"></code-example>
 
@@ -337,4 +345,4 @@ Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), show
 
 <!-- end links -->
 
-@reviewed 2022-02-28
+@reviewed 2023-08-16

aio/content/guide/route-animations.md

@@ -21,7 +21,7 @@ Start with the top-level component that hosts the view, and nest animations in t
 
 To enable routing transition animation, do the following:
 
-1.  Import the routing module into the application and create a routing configuration that defines the possible routes.
+1.  Create a routing configuration that defines the possible routes. For NgModule based applications, this will include creating a `RouterModule` and adding it to the main `AppModule`.
 1.  Add a router outlet to tell the Angular router where to place the activated components in the DOM.
 1.  Define the animation.
 
@@ -37,15 +37,27 @@ Implement a router transition animation that slides in the new view to the right
 
 ## Route configuration
 
-To begin, configure a set of routes using methods available in the `RouterModule` class.
-This route configuration tells the router how to navigate.
+To begin, configure a set of routes. This route configuration tells the router how to navigate.
 
-Use the `RouterModule.forRoot` method to define a set of routes.
-Also, add `RouterModule` to the `imports` array of the main module, `AppModule`.
+- Create an array called `routes` in `app.routes.ts` to define a set of routes. 
+- Add the routes to the `provideRouter` function in the providers array in `app.config.ts`.
+
+```ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes)
+  ]
+};
+```
 
 <div class="alert is-helpful">
 
 **NOTE**: <br />
+For `NgModule` based applications:
+
+Use the `RouterModule.forRoot` method to define a set of routes.
+Also, add `RouterModule` to the `imports` array of the main module, `AppModule`.
+
 Use the `RouterModule.forRoot` method in the root module, `AppModule`, to register top-level application routes and providers.
 For feature modules, call the `RouterModule.forChild` method instead.
 
@@ -53,7 +65,7 @@ For feature modules, call the `RouterModule.forChild` method instead.
 
 The following configuration defines the possible routes for the application.
 
-<code-example header="src/app/app.module.ts" path="animations/src/app/app.module.ts" region="route-animation-data"></code-example>
+<code-example header="src/app/app.routes.ts" path="animations/src/app/app.routes.ts" region="route-animation-data"></code-example>
 
 The `home` and `about` paths are associated with the `HomeComponent` and `AboutComponent` views.
 The route configuration tells the Angular router to instantiate the `HomeComponent` and `AboutComponent` views when the navigation matches the corresponding path.