首页 > 解决方案 > TypeError:_this.handler.handle 不是函数

问题描述

我使用 Angular 5.2.10,我想从 ng2-toastr 迁移到 ngx-toastr。

所以我删除了'this.toastr.setRootViewContainerRef(vcr);' 来自我的 AppComponent。

在那种情况下会发生错误。

ERROR TypeError: _this.handler.handle is not a function
    at MergeMapSubscriber.eval [as project] (http.js:1464)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at ScalarObservable.Observable._trySubscribe (Observable.js:172)
    at ScalarObservable.Observable.subscribe (Observable.js:160)
    at MergeMapOperator.call (mergeMap.js:92)
    at Observable.subscribe (Observable.js:157)
    at FilterOperator.call (filter.js:61)

这是旧代码。

export class AppComponent implements OnInit {
    fontClass: string;

    constructor(private router: Router, public toastr: ToastsManager, vcr: ViewContainerRef) {
        this.toastr.setRootViewContainerRef(vcr);
        let language = GlobalSession.getUserLanguage();

        if(language === 'ko_KR'){
            this.fontClass = 'font-kr'
        } else if(language === 'ja_JP'){
            this.fontClass = 'font-jp'
        } else {
            this.fontClass = 'font-kr'
        }
    }

    ngOnInit(): void {
    }

    title = 'app works!';
}

然后这是代码之后。

export class AppComponent implements OnInit {
    fontClass: string;

    constructor(private router: Router) {
        let language = GlobalSession.getUserLanguage();

        if(language === 'ko_KR'){
            this.fontClass = 'font-kr'
        } else if(language === 'ja_JP'){
            this.fontClass = 'font-jp'
        } else {
            this.fontClass = 'font-kr'
        }
    }

    ngOnInit(): void {
    }

    title = 'app works!';
}

这是我的 package.json

"dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.10",
    "@angular/compiler": "^5.2.10",
    "@angular/core": "^5.2.10",
    "@angular/forms": "^5.2.10",
    "@angular/http": "^5.2.10",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.10",
    "@angular/platform-browser-dynamic": "^5.2.10",
    "@angular/platform-server": "^5.2.10",
    "@angular/router": "^5.2.10",
    "@swimlane/ngx-charts": "^7.1.1",
    "@types/jquery.fancytree": "^2.7.34",
    "angular2-ie9-shims": "0.0.2",
    "angular2-signaturepad": "^2.8.0",
    "angular5-canvas-drawer": "^1.1.5",
    "chart.js": "^2.7.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.6",
    "d3": "4.9.1",
    "intl": "^1.2.5",
    "ng2-bootstrap-modal": "^1.0.1",
    "ng2-charts": "^1.6.0",
    "ng2-file-upload": "^1.3.0",
    "ng2-select": "^2.0.0",
    "ng2-toastr": "^4.1.2",
    "ngx-toastr": "^8.4.0",
    "ngx-bootstrap": "^2.0.5",
    "ngx-simple-modal": "^1.3.8",
    "pdf-annotate": "0.0.0",
    "pdf-annotate.js": "^1.0.0",
    "rxjs": "^5.5.6",
    "text-security": "^1.1.0",
    "text-signature": "^1.1.2",
    "videogular2": "^6.0.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.18"
},
"devDependencies": {
    "@angular/cli": "^1.7.4",
    "@angular/compiler-cli": "^5.2.10",
    "@types/core-js": "^0.9.43",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.89",
    "codelyzer": "~4.1.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "pdfjs-dist": "^2.0.489",
    "protractor": "~5.1.0",
    "ts-node": "~5.0.0",
    "tslint": "~5.9.1",
    "typescript": "2.6.2"
}

我不知道问题是什么。我希望我能得到一点线索。

标签: angularwebpackrxjstoastr

解决方案


在 app.module.ts 中,而不是

import {HttpClient, HttpHandler} from '@angular/common/http';
...
providers: [HttpClient, HttpHandler]

import { HttpClientModule } from '@angular/common/http';

这是在 Angular 中使用 http 的最新方式。


推荐阅读