键入错误this.httpClient.get(...).pipe不是函数 [英] Type error this.httpClient.get(...).pipe is not a function

问题描述

更新-错误已解决

我通过发出命令解决了该错误:

I solved this error by issuing command:

webpack --config webpack.config.vendor.js

但是，如果有人希望向我解释为什么需要webpack --config，我很乐意支持并接受您的回答.

If however anyone wishes to explain to me why was webpack --config necessary I would gladly upvote and accept your answer.

何时必须重新配置Webpack-每当我更新任何npm软件包或依赖项时?

When must I reconfigure webpack - any time I update any of the npm packages or dependencies?

原始问题

我正在追踪英雄巡回演出，并被困在最后一章"Http"中，在此步骤.

I'm following the Tour of Heroes and got stuck at the final chapter "Http", at this step.

当我尝试获取英雄列表时，我在Chrome控制台中收到错误消息:

When I go and try to fetch my hero list I get an error in Chrome console:

ERROR TypeError: this.httpClient.get(...).pipe is not a function

这是导致错误的代码段:

This is the piece of code that is causing the error:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/Observable/Of';
import { catchError, map, tap } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Hero } from '../models/Hero';

@Injectable()
export class HeroService {

    private apiUrl = "api/v1/Hero";

    constructor(
        private messageService: MessageService,
        private httpClient: HttpClient
    ) {}

    getHeroes(): Observable<Hero[]> {

        /// This is working as expected!
        //return this.httpClient.get<Hero[]>(this.apiUrl);

        return this.httpClient.get<Hero[]>(this.apiUrl)
            .pipe(
                tap(heroes => this.log(`fetched heroes list`)),
                catchError(this.handleError('getHeroes', []))
        );
    }

    ...
}

所有这些都在Visual Studio 2017解决方案/项目中，在这里我使用自己的WebApi 2 Controller提供数据，因此我没有使用任何CLI或《 Tour of Heroes》建议的内存中Web API模块.该项目是使用VS2017内置Angular模板生成的.

This is all inside a Visual Studio 2017 solution/project where I use my own WebApi 2 Controller serving data, so I'm not using any CLI or the Tour of Heroes suggested In-memory web API module. The project was generated with the VS2017 built-in Angular template.

没有编译错误，如果我省略".pipe ...."代码，则调用按预期进行.

There are no compile errors, the call is working as intended if I omit the ".pipe...." code.

这是我的package.json:

This is my package.json:

{
  "name": "DotnetNewAngular3",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js",
    "postinstall": "webpack --config webpack.config.vendor.js"
  },
  "devDependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/compiler-cli": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",
    "@angular/platform-browser": "^4.4.6",
    "@angular/platform-browser-dynamic": "^4.4.6",
    "@angular/platform-server": "^4.4.6",
    "@angular/router": "^4.4.6",
    "@ngtools/webpack": "1.5.0",
    "@types/chai": "4.0.1",
    "@types/jasmine": "2.5.53",
    "@types/webpack-env": "1.13.0",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "chai": "4.0.2",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.6.4",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.3",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.6",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  }
}

推荐答案

将其作为评论请求的答案发布.

Posting this as an answer as per comments request.

解决方案

我通过发出命令解决了该错误:

I solved this error by issuing command:

webpack --config webpack.config.vendor.js

这篇关于键入错误this.httpClient.get(...).pipe不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！