ngx-toastr.js?4996 :264 Uncaught TypeError: Object(. ..) 不是 eval 中的函数 (ngx-toastr.js?4996:264)

Question

我在 Angular 6 中使用 ngx-toastr 进行 http 错误通知，就像在 httpInterceptor 中注入(inject) ToastrService

    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);
 })
            )
    }
}

并在 app.module.ts 中导入 ToastrModule

imports:[
ToastrModule.forRoot()
]

我遇到了错误，知道这里出了什么问题............

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

Answer 1

我发现了关于这个的实际问题。发生这种情况是因为角度和包的版本不匹配。要克服此问题，请执行以下步骤
STEP1 : 检查角度 CLI 版本:ng --version现在检查这张图片

如果您的角度版本是 7.3.10 那么你需要安装 10.1.0 的版本ngx-toastr

STEP2 : 安装 的特定版本ngx-toastr 根据您的角度 CLI 版本:npm i ngx-toastr@10.1.0 --save STEP3 : 导入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 : 添加 CSS 中的路径款式 angular.json 中的数组文件
角.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"
]

更改 angular.json 后不要忘记重新启动服务器文件
STEP5 : 制作辅助服务来展示 toastr
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 : 现在你已经完成了，你只需要在你的 component.ts 中使用这些函数。文件
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');
    }
  }

}