p-toast issue with Angular 16 standalone app

[Goteii]

Describe the bug

I wanted to implement a notification component in my Angular 16 standalone app with a p-toast just in my app.component.html to keep it DRY. As long as I directly call this.messageService.add({}) from my components its fine, even if I invoke the messageService in my service. The problem starts when I call a service from a service so a flow is:
component -> service -> service.
In this situation I keep getting error:
ERROR
Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[RegisterComponent])[UserAuthService -> UserAuthService -> UserAuthService -> UserAuthService -> AppMessageService -> MessageService -> MessageService]:
NullInjectorError: No provider for MessageService!
NullInjectorError: R3InjectorError(Standalone[RegisterComponent])[UserAuthService -> UserAuthService -> UserAuthService -> UserAuthService -> AppMessageService -> MessageService -> MessageService]:
NullInjectorError: No provider for MessageService!

After hours of trying to work things out I managed to make a workaround based on setting a flag and toastMessageContent with signals in my last service(the most nested one) and then listen to that in effect() from my app.component.ts and display toast from there but this solution is nasty.

Environment

Local dev env, Angular 16, standalone, signals, vscode, win10, lazy-loaded components, nx

Reproducer

https://stackblitz.com/edit/stackblitz-starters-pncz7d?file=src%2Fapp%2Fuser-auth%2Fregister%2Fregister.component.ts

Angular version

16.2.0

PrimeNG version

16.5.0

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

18.12.0

Browser(s)

No response

Steps to reproduce the behavior

1. Create a standalone app
2. Install primeng
3. Import ToastModule in your app.component.ts and define p-toast in your app.component.html
4. Import "MessageService" in @component({providers: []}) in your app.component.ts
5. Create dummy.component.ts
6. Create dummy.service.ts
7. Create dummy2.service.ts
8. dummy.component.ts should call a method from dummy.service.ts which calls method from dummy2.service.ts
9. dummy2.service.ts method should include this.messageService.add() and private messageService: MessageService in its constructor.

Expected behavior

No console error and toast being displayed properly

[Urtgard]

I don't think this is an issue with PrimeNg.

1. Remove providers: [AppMessageService] from RegisterComponent
2. Remove providers: [MessageService] from AppComponent
3. Add MessageService to your providers array in appConfig

[Goteii]

Damn, it indeed works now. Thank you @Urtgard

[Ikeoh]

Guys, is the way I implemented the MessageService correct?

It didn't work for me...

[Goteii]

Hey @Ikeoh, did you try to pass "MessageService" in appConfig without wrapping it in importProvidersFrom() method? It should work that way if you import messageService and call this.messageService.add({}) from your components. In my forked link there is already implemented solution proposed by @Urtgard which works so you can look up there

[caboodal]

I can confirm that adding the MessageService directly into the app.config.ts file does prevent the null injector error.

However, the messages don't seem to be appear in the p-message component, very poor documentation on this to demonstrate how it all hangs together!

[naris]

@caboodal The messages are not supposed to appear in a p-message component -- you need a p-toast component for the messages to show up, this indeed documented here --> https://www.primefaces.org/primeng-v14-lts/toast

[caboodal]

@naris yeah I know I got it all working in the end both messages and toasts. The documentation falls a little short in providing the complete picture. I'm finding this with all of the components.

[FlorisRHeijmans]

I have the same issue of the Toast not showing using a in my component. I have stripped all code down to match the example. @caboodal Can you share the details on your fix?

Nvm, i had a with a key copied from another example, but then a key must be provided as a parameter to the add function.

[caboodal]

@FlorisRHeijmans are you sorted now?

[FlorisRHeijmans]

Yes!

[abdrhxyii]

If you are using angular version 17+
then add the MessageService and BrowserAnimationsModule in app.config.ts file in provider array.

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideHttpClient(), 
    MessageService, 
    importProvidersFrom([BrowserAnimationsModule]) ], 
};