Angular 17 - Standalone Components | Angular: torne sua aplicação interativa e personalizada com animações

Olá pessoal, essa dica vai aos colegas que, assim como eu, gostam de construir o projeto do zero, utilizando a versão mais recente do framework.

A partir do Angular 17, a equipe do Angular passou a utilizar os componentes "standalone" como padrão. Por conta disso, ao adicionar o "BrowserAnimationsModule" na lista de imports do meu componente, obtive o seguinte erro: NG05100: Providers from the BrowserModule have already been loaded.

Para contornar o problema, basta adicionar o método "provideAnimations()" na lista de providers do arquivo app.config.ts, localizado na pasta /src/app

No meu caso, o arquivo ficou assim:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideAnimations()]
};