Animation problems with Flowbite and PrimeNG in Angular 18

I'm developing an Angular 18 zoneless app with Flowbite as primary component library but I had to install PrimeNG too because I needed the <p-multiSelect> for my form.

The thing is, when I added the required "BrowserAnimationsModule" in my "app.config.ts" (without it the dropdown of the p-multiSelect doesn't work), the Flowbite drawer and dropdown that I'm using in my navbar component stopped working.

They only work if I refresh the page, but when I navigate between components, they stop working.

Code of app.component.ts

import { Component, inject, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
// Dependencias
private _translateService = inject(TranslateService);

ngOnInit(): void {
// Comprobamos si hay algún idioma almacenado, y si no lo hay, establece el español ('es') por defecto.
const defaultLang = localStorage.getItem('language') || 'es';
this._translateService.setDefaultLang(defaultLang);
this._translateService.use(defaultLang);
}
}


Code of app.config.ts:

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

import { routes } from './app.routes';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Función que se encarga de cargar los archivos de traducción. (ngx-translate)
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection(),
provideRouter(routes),
provideHttpClient(),
importProvidersFrom(
TranslateModule.forRoot({ // ngx-translate
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
}),
BrowserAnimationsModule // PrimeNG
),
],
};


Code of navbar.component.ts:

import { Component, inject, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { initDrawers, initDropdowns } from 'flowbite';

@Component({
selector: 'app-navbar',
standalone: true,
imports: [TranslateModule],
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.scss',
})
export class NavbarComponent implements OnInit {
// Dependencias
private _sanitizer = inject(DomSanitizer); // Nos permite renderizar SVGs desde TypeScript.

// Botones del menú desplegable lateral.
menuItems = [...
];

ngOnInit(): void {
initDrawers(); // Inicializar menú navbar.
initDropdowns(); // Inicializar dropdown usuario.
}
}


Code of search-products.component.ts (the only component where I use the p-multiSelect)

import { Component, inject, OnInit, signal } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { NavbarComponent } from '../../../../shared/layout/navbar/navbar.component';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
import { LoadingOverlayComponent } from '../../../../shared/layout/loading-overlay/loading-overlay.component';
import { ProductsService } from '../../services/products.service';
import { MultiSelectModule } from 'primeng/multiselect';

@Component({
selector: 'app-search-products',
standalone: true,
imports: [
NavbarComponent,
ReactiveFormsModule,
TranslateModule,
InfiniteScrollDirective,
LoadingOverlayComponent,
MultiSelectModule,
],
templateUrl: './search-products.component.html',
styleUrl: './search-products.component.scss'
})
export class SearchProductsComponent implements OnInit {

materials: any[] = [];

searchProductsForm!: FormGroup; // Formulario de búsqueda de productos.
productList = signal<any[]>([]); // Array que almacenará todos los productos que recojamos del endpoint.
sortOrder: boolean = true; // true = asc | false = desc
page = 1; // Posición desde la que empezaremos a recoger datos.
pageSize = 10; // Número de registros por tanda que recogeremos.
loading = signal(false); // Signal que controla la pantalla de carga.
isFormValid = signal(false); // Signal que controla si el formulario es válido para la búsqueda.

// Dependencias
private _form = inject(FormBuilder);
private _productsService = inject(ProductsService);

ngOnInit(): void {
// Inicialización del formulario de búsqueda.
this.searchProductsForm = this._form.group({
productRef: [''],
catalogRef: [''],
stockFilter:[''],
productType:['joyas'],
selectedMaterials:['']
});

this.materials = [
{name: 'Oro'},
{name: 'Plata'},
{name: 'Platino'},
];
}


Why is this happening? It's because how Flowbite and PrimeNG manage their animations? I can't have them to work simultaneously, I have to delete the "BrowserAnimationsModule" of my "app.config.ts" for the drawer and dropdown of my navbar to work and I have to include it to the "p-multiSelect" to work (but then the drawer/dropdown stop working).

Thanks for your help and time.

Continue reading...