Type error this.httpClient.get(…).pipe is not a function

问题

Update - error solved

I solved this error by issuing command:

webpack --config webpack.config.vendor.js

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

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

Original question

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

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', []))
        );
    }

    ...
}

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.

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

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"
  }
}

回答1:

Not sure how postinstall step is related, nor which npm command you are running when you get this error, but generally I can tell you that webpack by default loads file called webpack.config.js.

You will notice that the vendor part is missing. I assume, your vendor config has some differences to standard one and this is solving your issue.

Your package.json unfortunately doesn't say anything. You have to show the two configs.

回答2:

Posting this as an answer as per comments request.

Solution

I solved this error by issuing command:

webpack --config webpack.config.vendor.js

来源：https://stackoverflow.com/questions/48429953/type-error-this-httpclient-get-pipe-is-not-a-function

标签

angular

rxjs