Primeng Toast not working in Angular auth guard function - Stack Overflow

admin管理员组

文章数量:1123603

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 appponent.ts.

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

@Component({
  selector: 'app-root',
  imports: [Toast],
  templateUrl: './appponent.html',
  styleUrl: './appponent.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.

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.

• angular
• primeng
• angular19

Share Improve this question Follow asked 22 hours ago am_noob_coderam_noob_coder 1322 bronze badges New contributor am_noob_coder is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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 {
 ...

本文标签： Primeng Toast not working in Angular auth guard functionStack Overflow