How to display PrimeNG dialogs with Angular 19 standalone?

I'm trying to display a dialog when my API returns an error during authentication. My project is using Angular 19 standalone mode, so I don't have an AppModule.

I added the DialogService provider at Route level in the app.route.ts, then I provide my ToasterService (that's a service that shows small dialogs for X seconds), but when I call the method which opens the dialog in my DOM appears p-dynamicdialog but nothing appears on the UI.

Here is some code to clarify things :

app.route.ts

export const routes: Routes = [
{
path: 'account',
component: AccountLayoutComponent,
data: {
permission: null,
navigation: new PrimeNavigation('account', 'Login', [
new NavigationItem('Login', 'Login', 'account/login'),
])
},
children: [
{
path: 'login',
component: LoginComponent,
providers: [DialogService, ToasterService]
},
]
}
]


toaster.service.ts

@Injectable({
providedIn: 'root',
})
export class ToasterService {
constructor(private readonly _dialogService: DialogService) { }

public showError(message: string, isButtonVisible = false, textButton = 'Close'): DynamicDialogRef {
return this.show(message, 'far fa-times-circle', isButtonVisible, textButton);
}

public show(message: string, icon: string | null, isButtonVisible = false, textButton = 'Close', isProgress = false): DynamicDialogRef {
return this._dialogService.open(ToasterComponent, {
header: 'Choose a Product',
width: '70%',
contentStyle: { "max-height": "500px", "overflow": "auto" },
baseZIndex: 1000
})
}
}


login.component.ts

@Component({
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
standalone: true
})
export class LoginComponent {
constructor(private readonly _toasterService: ToasterService) {}

public onLoginClick(): void {
*skip all the useless part*
this.myService.authenticate(myData: MyObject)
.pipe(...)
.subscribe({
next: () => { },
error: (error) => {
this._toasterService.showError('Auth failed!'); <= Here is the call
}
});
}
}


Did I forget something to make it work?

Continue reading...