node_modules/ng2-toastr/src/toast-container.component.d.ts(1,48) 中的错误：TS2305-/node_modules/@angular/core/core"' 没有导出成员

Question

I have the latest version of "rxjs": "^6.0.0" and @angular/cli": "~6.0.8" When i run ng serve i am receiving below compilation error-

ERROR in node_modules/ng2-toastr/src/toast-container.component.d.ts(1,48): 
 /node_modules/@angular/core/core"' has no exported member'AnimationTransitionEvent'.

imported toastermodule in the below format in my app.module.ts
import {ToastrModule} from 'ngx-toastr';

Also receiving below error

error TS2305: Module '"C:/Users/user1/Sublime Text 3/NodeJS/groupchat-application/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
imported as below in  My service.ts
import { Observable, of} from "rxjs"; 

Please guide on how to proceed

Answer 1

Use **ngx-toastr**

**steps to follow**

Install dependencies 

1)npm install ngx-toastr --save
2)npm install @angular/animations --save

3)Add CSS to your angular.json file
"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

4)Add toastr module to your app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [BrowserAnimationsModule,
    ToastrModule.forRoot() 
})

5) Add toastr service to your desired component 

import { ToastrService } from 'ngx-toastr';

@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}

Answer 2

You use "rxjs": "^6.0.0" and ng2-toastr: uses rxjs below 6.0.0 so compatibiliy issue is there. You have two options to use:

1. rxjs-compat with rxjs 6.0.0

2. Else use ngx-toasta [link]

Edit: Due to the update of angular and its dependency not in sync and if you are using angular material 6+ then you can go for @angular/material Snackbar which is better compatible with the latest version of Angular.

Answer 3

i was able to solve this problem using

        npm install ng6-toastr-notifications --save

a good documentation link is available.i will provide u the link

https://www.npmjs.com/package/ng6-toastr-notifications

Answer 4

This probleme is due to toastr and animation comptabilty with your angular version !

   ngx-toastr   Angular
    6.5.0       4.x
    8.10.2      5.x
    10.1.0      8.x 7.x 6.x
    11.3.3      8.x
    12.1.0      9.x
   current  >= 10.x

try those version for your case:

first uninstall both toastr and animation if you have them in your project the run those ones:

npm install ngx-toastr@10.0.4 --save

npm install @angular/animations@8.2.14 --save