7635 ERROR TypeError: this.flashMessages.show is not a function

The program is running well, at least do not see any issue in the editor's (VSCode) console. But when I click submit button, the browser's console shows the error.

My register.component.ts file looks like this

import { FlashMessagesService } from 'flash-messages-angular/module/flash-messages.service';

@Component({
  providers: [FlashMessagesService]
})

export class RegisterComponent implements OnInit {

  constructor(
    private flashMessages: FlashMessagesService
    ) { }

  ngOnInit(): void {
  }

  onRegisterSubmit() {
    
    }

    //var flashMessages = this.flashMessages

    // Required fields
    if(!this.validateService.validateRegister(user)){
      this.flashMessages.show(
        'Please fill all fields', 
        {cssClass: 'alert-danger', timeout:3000});
      return false;
    }

    // Validate email
    if(!this.validateService.validateEmail(this.email)){
      this.flashMessages.show('Please use a valid email', 
      {cssClass: 'alert-danger', timeout:3000});
      return false;
    }
  }

}

app.module.ts file look something like this

import { FlashMessagesModule } from 'flash-messages-angular';

imports: [
    FlashMessagesModule.forRoot()
  ],

The app.component.html file looks like this

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

This is angular-cli version

Angular CLI: 14.2.2 Node: 16.17.0 Package Manager: npm 8.15.0 OS: win32 x64

Angular: undefined ...