_this._flashMessagesService.grayOut is not a function

[denzelvb]

I imported everything, ng-serve does not give any errors,

but the moment I call a function of this._flashMessagesService I get an error saying the following:

_this._flashMessagesService.grayOut is not a function

or

_this._flashMessagesService.show is not a function

[moff]

@denzelvb are you sure you've imported module properly?

[mterczynski]

I got the same (or similar) issue now, although flash messages work well in my other project. My problem is that every new instance of FlashMessagesService is an empty object (doesn't matter if I use DI or create new instance manually).

Some parts of one of my components code:

import { FlashMessagesService } from 'angular2-flash-messages';    

constructor(private flashMessageService: FlashMessagesService) {
}

ngOnInit() {
   console.log(new FlashMessagesService())
   console.log(this.flashMessageService);
}

Console logs are:

If I find a solution, I will let you know.

[amirensit]

same problem. I think it needs instantiation of class FlashMessagesService

[Senegal]

I faced same issue. Any updated on it?

[moff]

@Senegal I've just uploaded new version of the package to NPM. Update and import the package with .forRoot() - check update to README.md

Check if it works properly now and let me know. Thanks!

[Senegal]

@moff nice work, thank you! btw, I needed to upgrade to angular 5.

did you try build it in production? is everything ok?

[jbistis]

Reinstalled angular2-flash-messages using npm app.module.ts has: import { FlashMessagesModule } from 'angular2-flash-messages'; imports:[] has FlashMessagesModule.forRoot() component has import { FlashMessagesService } from 'angular2-flash-messages'; constructor has: 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']); }); }

...still getting console error _this.flashMessagesService.show is not a function Any ideas?

[pranaysand]

I have faced the similar issue. I forgot to insert my selector into the html file I want it to show. Please add this in your HTML, mine was app.component.html as it was an alert.

[xuejmnet]

<app-navbar></app-navbar>
<div class="container">
  <flash-messages></flash-messages> //this 
  <router-outlet></router-outlet>
</div>