1

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"
  }
}
Iztoksson
  • 980
  • 16
  • 32
  • Did you try `import 'rxjs/add/operator/pipe'` already? – vince Jan 24 '18 at 19:26
  • @vincecampanale thanks for the suggestion, I tried it but I get an error - Cannot find module "rxjs/add/operator/pipe". I believe .pipe should be in Observable from RxJs 5.5 onward "The let operator is now part of Observable as pipe and cannot be imported." so no need to import it separately. – Iztoksson Jan 24 '18 at 19:31
  • 1
    Please post as answer. It might really help someone – Julius Dzidzevičius Jan 24 '18 at 19:47

2 Answers2

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.

Miroslav Jonas
  • 5,407
  • 1
  • 27
  • 41
  • I'm still looking into it but - the "webpack.config.vendor.js" bundles everything into wwwroot/dist/vendor.js file later served by app.UseStaticFiles();. At this point I'm assuming that my upgrade of RxJS to 5.5.6 wasn't re-bundled. Compile went OK but in Chrome I got an error because the new Observable .pipe (5.5 onward afaik) was missing from mentioned vendor.js and was thus returning error. Thank you for your explanation! – Iztoksson Jan 24 '18 at 20:26
0

Posting this as an answer as per comments request.

Solution

I solved this error by issuing command:

webpack --config webpack.config.vendor.js
Iztoksson
  • 980
  • 16
  • 32