PrimeNG Ripple Effect Not Working in Angular

I'm having trouble getting the ripple effect to work in my Angular application using PrimeNG. Despite following the documentation and various tutorials, the ripple effect doesn't seem to activate on my p-button components. Here is what I've done so far:

Environment

• Angular version: 17

• PrimeNG version: 17+

Steps Taken

Created a PrimengModule to configure PrimeNG:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
import { PrimeNGConfig } from 'primeng/api';

const initializeAppFactory = (primeConfig: PrimeNGConfig) => () => {
  primeConfig.ripple = true;
};

@NgModule({
  declarations: [],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAppFactory,
      deps: [PrimeNGConfig],
      multi: true,
    },
  ],
  imports: [ButtonModule, RippleModule],
  exports: [ButtonModule, RippleModule],
})
export class PrimengModule {}

Imported PrimengModule in my LoginComponent.ts

import { Component } from '@angular/core';
import { PrimengModule } from '../../../../shared/modules/primeng/primeng.module';

@Component({
  selector: 'app-learner-login',
  standalone: true,
  imports: [PrimengModule],
  templateUrl: './learner-login.component.html',
  styleUrl: './learner-login.component.scss'
})
export class LearnerLoginComponent {

}

this is my LoginComponent.html using the pRipple directive

<p-button
  pRipple
  label="Submit"
  icon="pi pi-check"
  iconPos="right"
  size="small"
></p-button>

Added PrimeNG and PrimeIcons CSS to styles.scss:

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";

@layer tailwind-base, primeng, tailwind-utilities;
        


@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

Despite these configurations, the ripple effect is not visible when I click the button. There are no errors in the console, and the button renders correctly with other PrimeNG styles and functionalities working as expected.

What I've Tried

• Ensured that the CSS files are correctly loaded.

• Checked the browser console for errors.

• Verified that PrimeNGConfig is initialized and ripple is set to true.

What am I missing or doing wrong? How can I get the ripple effect to work with PrimeNG in my Angular application?

The APP initializer might be the problem, since it's supposed to be at the root of the module, and usually this applies for modular approach of bootstrapping Angular applications. Instead just set the this.primengConfig.ripple to true at the root standalone component of your application:

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
    styles: [`
        :host ::ng-deep button {
            margin-right: .5em;
        }
    `]
})
export class AppComponent { 
  constructor(private primengConfig: PrimeNGConfig) {}

  ngOnInit() {
    this.primengConfig.ripple = true;
  }
}

Stackblitz Demo