使用angular2-flash-messages时遇TypeError: _this.flashMessagesService.show不是函数

Hey there, let's work through why you're hitting this error with the angular2-flash-messages component. This issue almost always boils down to a misconfigured service setup or a version compatibility mismatch. Here's how to fix it:

1. Double-check your AppModule setup #

First, confirm you've correctly initialized the module with forRoot() — this step ensures the service is provided as a singleton across your app. Your current code looks right, but let's make sure there are no typos:

// app.module.ts
import { FlashMessagesModule } from 'angular2-flash-messages';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    FlashMessagesModule.forRoot(), // Critical for providing the service
    RouterModule.forRoot(appRoutes)
  ],
  // ... other declarations/providers
})
export class AppModule { }

Important: Don't add FlashMessagesService to the providers array in your AppModule or component — forRoot() already handles this, and duplicating it will create a broken service instance.

2. Verify package installation & compatibility #

Older versions of angular2-flash-messages often clash with newer Angular versions (6+). Start by reinstalling the package to get the latest compatible build:

npm uninstall angular2-flash-messages
npm install angular2-flash-messages --save

If you're using Angular 12+, note this package has been renamed to @angular-flash-messages/core. You'll need to switch to the updated package:

npm uninstall angular2-flash-messages
npm install @angular-flash-messages/core --save

Then update your imports across your app:

// app.module.ts
import { FlashMessagesModule } from '@angular-flash-messages/core';

// signin.component.ts
import { FlashMessagesService } from '@angular-flash-messages/core';

3. Remove duplicate service declarations #

Make sure you haven't added FlashMessagesService to the providers array in your signin.component.ts. Doing this creates a fresh, uninitialized instance of the service that won't have the show method. Your component should look like this (no providers array):

// signin.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages'; // Or the new package path

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
  // No `providers: [FlashMessagesService]` here!
})
export class SigninComponent {
  email: string;
  password: string;

  constructor(
    private authService: AuthService,
    private router: Router,
    private flashMessagesService: FlashMessagesService
  ) { }

  onSubmit() {
    this.authService.signin(this.email, this.password)
      .then((res) => {
        this.flashMessagesService.show('You are signed in', { cssClass: 'alert-success', timeout: 4000 });
        this.router.navigate(['/']);
      })
      .catch((err) => {
        this.flashMessagesService.show(err.message, { cssClass: 'alert-danger', timeout: 4000 });
        this.router.navigate(['/signin']);
      });
  }
}

4. Clear Angular's build cache #

Cached build files can sometimes cause odd, hard-to-debug issues. Clear the cache and rebuild your app to rule this out:

ng cache clean
ng serve --open

After working through these steps, your flashMessagesService.show() method should function as expected.

内容的提问来源于stack exchange，提问作者Jim Bistis