Remove angular animations and use pure CSS animations

[bastienmoulia]

Angular animations are not recommended anymore: https://angular.dev/guide/animations

It should be nice to still have animations, but in CSS.

[victornoleto]

I agree. I just installed the library in a newly created Angular 20 project and received the following error message. It seems that the @angular/animations extension is no longer being installed by default in new projects.

victor@vivobook:/var/www/pessoal/starter-kit/angular-starter-kit(master)$ ng serve
Initial chunk files | Names                   |  Raw size
styles.css          | styles                  |   1.02 MB | 
chunk-ZFCSK27H.js   | -                       |  21.86 kB | 
main.js             | main                    |   5.85 kB | 
chunk-KUYEFDMS.js   | -                       |   2.61 kB | 
chunk-EVSPGG2W.js   | -                       |   1.64 kB | 
chunk-EW2NY35S.js   | -                       | 967 bytes | 
chunk-XRWZE6XY.js   | -                       | 255 bytes | 
polyfills.js        | polyfills               | 128 bytes | 

                    | Initial total           |   1.05 MB

Lazy chunk files    | Names                   |  Raw size
chunk-VU3NQHKX.js   | users-index-component   |  66.63 kB | 
chunk-SISFIY2D.js   | auth-component          |  48.65 kB | 
chunk-6PAFLLLJ.js   | -                       |  22.35 kB | 
chunk-DFA4LPFK.js   | users-form-component    |  13.39 kB | 
chunk-RZOMPHSL.js   | register-component      |  11.35 kB | 
chunk-F222TBTR.js   | ui-components-component |  10.54 kB | 
chunk-OBD2JKQ3.js   | login-component         |  10.02 kB | 
chunk-QNIS5UGH.js   | dashboard               |   4.23 kB | 
chunk-JODE57EJ.js   | guest-component         |   3.26 kB | 
chunk-32Y2NY6B.js   | -                       |   2.62 kB | 
chunk-UH4WZKCM.js   | -                       |   2.38 kB | 
chunk-OTI7IIRQ.js   | users-routes            |   1.38 kB | 
chunk-F7BQUBUG.js   | -                       |   1.23 kB | 
chunk-H7GZYQU5.js   | auth-routes             | 774 bytes | 
chunk-2DYZWTZ5.js   | home-routes             | 753 bytes | 
...and 2 more lazy chunks files. Use "--verbose" to show all the files.

Application bundle generation complete. [3.197 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
3:22:36 PM [vite] (client) Re-optimizing dependencies because lockfile has changed
3:22:36 PM [vite] (ssr) Re-optimizing dependencies because lockfile has changed (x2)
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "@angular/animations"

    node_modules/ngx-toastr/fesm2022/ngx-toastr.mjs:3:59:
      3 │ import { trigger, state, style, transition, animate } from '@angular/animations';
        ╵                                                            ~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@angular/animations" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

/var/www/pessoal/starter-kit/angular-starter-kit/node_modules/esbuild/lib/main.js:1463
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/ngx-toastr/fesm2022/ngx-toastr.mjs:3:59: ERROR: Could not resolve "@angular/animations"
    at failureErrorWithLog (/var/www/pessoal/starter-kit/angular-starter-kit/node_modules/esbuild/lib/main.js:1463:15)
    at /var/www/pessoal/starter-kit/angular-starter-kit/node_modules/esbuild/lib/main.js:924:25
    at /var/www/pessoal/starter-kit/angular-starter-kit/node_modules/esbuild/lib/main.js:1341:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v24.4.0

[hamfastgamgee]

With the release of Angular 20.2, @angular/animations is now formally deprecated and will be removed in v23. So this request is now significantly more important. (Speaking only for myself: This is my only dependency on @angular/animations.)

[longwa]

Just FYI, per the docs, if you remove provideAnimations() from your ApplicationConfig, you can tell toastr not to try to use the animations as a workaround to prevent the error:

    provideToastr({
      toastComponent: ToastNoAnimation
    }),

Obviously this results in not having any animations, but at least you can remove it as a provider.

[BeejeeDS]

I made an alternative toast component, for those looking for an alternative that uses css animations only.
You can use the answer of @longwa to set the custom toast as the default component.

Maybe the devs can use this as a reference. Ignore the fluv prefix, it makes sense for my current client.

TS

import { Component } from '@angular/core';
import { ToastNoAnimation } from 'ngx-toastr';

@Component({
    selector: '[fluv-toast]',
    templateUrl: './toast.component.html',
    host: {
        'animate.enter':'fluv-animation-faded-expand',
        'animate.leave':'fluv-animation-faded-collapse'
    }
})
export class FluvToast extends ToastNoAnimation {}

HTML

@if (options.closeButton) {
    <button (click)="remove()" type="button" class="toast-close-button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
}

@if (title) {
    <div [class]="options.titleClass" [attr.aria-label]="title">
        {{ title }}
        @if (duplicatesCount) {
            [{{ duplicatesCount + 1 }}]
        }
    </div>
}

@if (message) {
    @if (options.enableHtml) {
        <div role="alert" [class]="options.messageClass" [innerHTML]="message"></div>
    } @else {
        <div role="alert" [class]="options.messageClass" [attr.aria-label]="message">
            {{ message }}
        </div>
    }
}

@if (options.progressBar) {
    <div>
        <div class="toast-progress" [style.width]="width() + '%'"></div>
    </div>
}

CSS

:root {
    interpolate-size: allow-keywords;
}

.fluv-animation-faded-expand {
    overflow: hidden !important;
    animation: expand 150ms linear, fade-in 300ms ease-in;
}

.fluv-animation-faded-collapse {
    overflow: hidden !important;
    animation: collapse 150ms linear, fade-out 300ms ease-in;
    animation-fill-mode: forwards;
}

@keyframes expand {
    0% {
        height: 0;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
}

@keyframes collapse {
    100% {
        height: 0;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
}

@keyframes fade-out {
    100% {
        opacity: 0;
    }
}

[Algonight]

Just FYI, per the docs, if you remove provideAnimations() from your ApplicationConfig, you can tell toastr not to try to use the animations as a workaround to prevent the error:

    provideToastr({
      toastComponent: ToastNoAnimation
    }),

Obviously this results in not having any animations, but at least you can remove it as a provider.

Hello, we tried in my projects this solution, but it does not work. We are currently migrating with angular 20 and remove completely @angular/animations package from the dependencies. We used the providedToastr in a main.ts file but still got the same error as
here. Do you have any idea ?

bootstrapApplication(AppComponent, {
  providers: [
    provideToastr({
      toastComponent: ToastNoAnimation,
    }),
    ...