Not working properly flash messages in angular 5

I get this error when I import angular flash messages. I followed this link to install it. https://www.npmjs.com/package/angular-flash-message. But I get this . I already setup the all components according to the given guide.

This is my app.componenet.html

<app-navbar></app-navbar>
















This is my register.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService} from '../../service/auth.service';
import {FlashMessage} from 'angular-flash-message';

@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

name:String;
username:String;
email:String;
password:String;

constructor(
private authService:AuthService,
private flashMessage: FlashMessage
) { }

ngOnInit() {
}

registerData(){

const user = {
name:this.name,
username:this.username,
email:this.email,
password:this.password
};

this.authService.registerUser(user).subscribe(res=>{


if(res.state) {
// this.flashMessage.show("You're registered", {cssClass: 'alert-success', timeout: 3000});
this.flashMessage.success('Success registered');
// this.router.navigate(['/login']);

}else {
// this.flashMessage.show("something went wrong", {cssClass: 'alert-danger', timeout: 3000});
this.flashMessage.success('something went wrong');
// this.router.navigate(['/register']);
}

});
}

}


This is myapp.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule,Routes } from '@angular/router';
import {FlashMessageModule} from 'angular-flash-message';


import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';

import { AuthService } from './service/auth.service';


const applicationRoutes:Routes = [

{path:'login',component:LoginComponent},
{path:'register',component:RegisterComponent},
//{path:'profile',component:ProfileComponent,canActivate: [AuthGuard]},


];


@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
RegisterComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(applicationRoutes),
FlashMessageModule
],
providers: [AuthService],
bootstrap: [AppComponent]
})
export class AppModule { }


I already tried by changing, import {FlashMessageModule} from 'angular-flash-message'; to import {FlashMessageModule} from 'angular2-flash-message'; . But it doesn't work as well.

I can't figure out why this error come out as I'm already set up correctly. Please any one help me.

1 Answer
1

Check if npm actually installed it. sometimes it doesn't go quite alright you know.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.