One IT Thing

IT業界で飯を食う為の学習系雑記

angular nodejs typescript プチハマリ解決日記

Angular4.4のHTTP通信処理にタイムアウトを設定をすると「timeout is not a function」エラーが発生する

投稿日:2019年6月5日 更新日:

事象

Angular4.3で追加されたHttpClientModuleに移行せず、HttpModuleを使い続けているアプリで、とある理由からpackage-lock.jsonを削除してnpm installし直しました。

ビルド後、HTTP通信を行うとブラウザコンソールに以下のエラーが発生して通信に失敗してしまいます。

ERROR TypeError: this.http.post(...).timeout is not a function

    (snip)

原因

RxjsがバージョンアップされたことによってObservableオブジェクトの構成方法が変わった為です。新しいバージョンのObservable.prototypeにはtimeoutメンバがデフォルトでは含まれません。

対処

HttpModuleを使用しているtsファイルで「rxjs/add/operator/timeout」をimportすることでObservable.prototypeにtimeoutメンバが追加され、timeout関数が使えるようになります。

import 'rxjs/add/operator/timeout';

再度ビルド実行して事象のエラーが発生しなくなることを確認します。

まとめ

ちょっと深掘りしてインポートした「node_modules/rxjs/add/operator/timeout.js」を見てみます。Observable.prototype.timeoutに「node_modules/rxjs/operator/timeout.js」を突っ込んでます。

"use strict";
var Observable_1 = require('../../Observable');
var timeout_1 = require('../../operator/timeout');
Observable_1.Observable.prototype.timeout = timeout_1.timeout;
//# sourceMappingURL=timeout.js.map

requireされた「node_modules/rxjs/operator/timeout.js」 を見てみるとtimeout関数が定義されています。

function timeout(due, scheduler) {
    if (scheduler === void 0) { scheduler = async_1.async; }
    var absoluteTimeout = isDate_1.isDate(due);
    var waitFor = absoluteTimeout ? (+due - scheduler.now()) : Math.abs(due);
    return this.lift(new TimeoutOperator(waitFor, absoluteTimeout, scheduler, new TimeoutError_1.TimeoutError()));
}
exports.timeout = timeout;

    (snip)

この関数がObservableに追加されることで今まで通りtimeout関数を呼べるようになります。

しかしNode.js使ったアプリでpackage-lock.jsonをリセットすると、バージョン齟齬というスリルたっぷりのアトラクションをもれなく味わえますね。

日本でも話題になったこのツイートを思い出しました。

「なぜプログラマは料理が好きか。人参の皮をむき、切ってシチューに入れた後、皮をむくのに使ったピーラーが数バージョンのバージョンダウンをしていて、ピーラーのメーカーが人参4.3のサポートを打ち切っていたことに後から気付く、なんてことが料理には無いから。」

Randallさんのユーモア素敵です。

-angular, nodejs, typescript, プチハマリ解決日記

執筆者:

関連記事

Angular8のDefferential Loadで作られたPolyfill抜きJSがブラウザに読み込まれるまでを観察してみる

Angular単体では約30%の削減でした。 2019/05にリリースされたAngular8では、ビルド結果として生成されるバンドルファイルがES6(ES2015)対応しているモダンブラウザ用、とそう …

PuppeteerでGoogle検索すると「UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement」

Puppeteerを新規インストールしてGoogle検索すると大概失敗、稀に成功します。 公式サンプルのGoogle Developers検索は動くのにGoogle検索は何でしっかり動かんの?となりま …

nvm-windows1.1.6でNode.jsを入れようとするとnpmコマンドのインストールがエラーになる

目次1 事象2 原因3 対処4 まとめ 事象 Win10、nvm-windows 1.1.6環境下でNode.js 10.16.0を入れようとした際に以下のエラーが発生。 C:\src\js\angu …

java.security.InvalidKeyException: IOException : DerInputStream.getLength(): lengthTag=111, too big.

目次1 事象2 原因3 対処4 得た教訓 事象 OpenSSLで作成した秘密鍵をJava(Eclipse + Maven環境)で読み込み、公開鍵で暗号化されたデータを復号しようとした際に記事名の例外が …

ブラウザでRSA暗号化したデータをサーバで復号する(Angular + JSEncrypt、Spring MVC)【後編】

前回の続きです。 One IT ThingブラウザでRSA暗号化したデータをサーバで復号する(Angular + JSEncrypt、Spring …https://one-it-thi …

 

shingo.7k24
 

東京在勤、職歴20年越え中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけどフリーランスで孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。