Primeng Toast not working in Angular auth guard function

I tried to display toast in CanActivateFn function, but it didn't work and the browser console display this error.

ERROR NullInjectorError: NullInjectorError: No provider for _MessageService!
    at NullInjector.get (core.mjs:1644:21)
    at R3Injector.get (core.mjs:2169:27)
    at R3Injector.get (core.mjs:2169:27)
    at injectInjectorOnly (core.mjs:1100:36)
    at ɵɵinject (core.mjs:1106:40)
    at inject (core.mjs:1191:10)
    at authGuard (auth.guard.ts:8:26)

Here is my authGuard code:

import { CanActivateFn } from '@angular/router';
import { AccountService } from '../services/account.service';
import { inject } from '@angular/core';
import { MessageService } from 'primeng/api';

export const authGuard: CanActivateFn = (route, state) => {
  const accountService = inject(AccountService);
  const messageService = inject(MessageService);

  if(accountService.currentUser()) {
    return true;
  } else {
    messageService.add({
      severity: 'error',
      summary: 'Access Denied',
      detail: 'You need to be logged in to view this page.',
      life: 2000,
    });
    return false;
  }
};

I've already add MessageService as provider in app.component.ts.

import { MessageService } from 'primeng/api';
//...

@Component({
  selector: 'app-root',
  imports: [Toast],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  providers: [MessageService]
})
export class AppComponent implements OnInit {
//...

Am I missed something here?

I try to display the toast but run the code inside the authguard. The expected result is the toast should be displayed.

You need to add the provider MessageService in the application level.

bootstrapApplication(App, {
  providers: [
    ...
    MessageService,
    ...
  ]
});

Or try providedIn: 'root' on the service, if the service is not provided from a library.

@Injectable({ providedIn: 'root' })
export class MessageService {
 ...