ngx-toastr.js?4996:264 Uncaught TypeError: Object(...) is not a function at eval (ngx-toastr.js?4996:264)

Question

I am using ngx-toastr in angular 6 for http error notification, as injected ToastrService in httpInterceptor

    export class MyInterceptor implements HttpInterceptor {
        constructor(public toasterService: ToastrService) { }

        intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            return next.handle(request)
                .pipe(
                    tap((evt: any) => {
                        if (evt instanceof HttpResponse) {
                            if (evt.body)
                                this.toasterService.success('success', '!!', { positionClass: 'toast-bottom-center' });
                                //alert(`success`);

                        }
                    }),
                    catchError((err: any) => {                    
                        if (err instanceof HttpErrorResponse) {
                            try {
                                this.toasterService.error(err.error.message, err.error.title, { positionClass: 'toast-bottom-center' });

                            } catch (e) {
                                this.toasterService.error('An error occurred', '', { positionClass: 'toast-bottom-center' });

                            }
                            //log error 
                        }
                        return of(err);
 })
            )
    }
}

and imported ToastrModule in app.module.ts like

imports:[
ToastrModule.forRoot()
]

I am getting below error, any idea whats going wrong here..............

ngx-toastr.js?4996:264 Uncaught TypeError: Object(...) is not a function at eval (ngx-toastr.js?4996:264) .................................

Answer 1

I found the actual issue regarding this. It's happening because of the mismatch of the version of an angular and the package. To overcome this problem perform the following steps

STEP1: Check for angular CLI version: ng --version

Now check this image

If your angular version is 7.3.10 then you need to install 10.1.0 version of ngx-toastr

STEP2: Install a specific version of ngx-toastr according to your angular CLI version: npm i ngx-toastr@10.1.0 --save

STEP3: import it into app.module.ts

app.module.ts

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { ToastrModule } from 'ngx-toastr';
 
@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ],
  bootstrap: [App],
  declarations: [App]
})

export class AppModule {}

STEP4: add css path in styles array in angular.json file

angular.json

"styles": [
    "node_modules/font-awesome/css/font-awesome.css",
    "src/styles/app.scss",
    "node_modules/sweetalert2/dist/sweetalert2.min.css",
    "node_modules/ngx-toastr/toastr.css"
]

Don't forget to restart your server after making changes in angular.json file

STEP5: make helper service to show toasters

helper.service.ts

import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Injectable({
    providedIn: 'root'
})

export class HelperService {
    constructor(private toastr: ToastrService) { };

    showSuccessToast(msg) {
        this.toastr.success(msg);
    }

    showErrorToast(msg) {
        this.toastr.error(msg);
    }

    showInfoToast(msg) {
        this.toastr.info(msg);
    }
}

STEP6: Now you are done you just need to use these functions in your component.ts file

user.component.ts

import { Component, OnInit } from '@angular/core';
import { routerTransition } from '../../router.animations';
import { UserService } from './user.service';
import { HelperService } from 'src/app/helpers/helper.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  animations: [routerTransition()]
})

export class UserComponent implements OnInit {

  constructor(
    private userService: UserService,
    private helperService: HelperService,
  ) {
  }

  ngOnInit() {
    this.getUsers();
  }

  async getUsers() {
    try {
      const res: any = await this.userService.getUsers();
      this.helperService.showSuccessToast(res.message);
    } catch (err) {
      this.helperService.showErrorToast(err.error || 'Something went wrong');
    }
  }

}