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, プチハマリ解決日記

執筆者:

関連記事

ionicアプリを多言語化する

目次1 目的2 環境3 手順1.インストール4 手順2.src/assets/i18nに翻訳ファイルを作成する5 手順3.app.module.tsにngx-translate関連のモジュールを登録す …

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

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

compodocでAngularプロジェクトのビジュアルなドキュメントを自動生成する

Java、C、Pythonのドキュメントを自動生成する際にDoxygenを使えばクラス図や呼び出し図、呼び出され図を作れて便利です。 しかしDoxygenはTypescriptには対応しておらず、.t …

Nodeアプリが依存するnpmモジュールライセンスをlicense-checker & Jenkinsで自動チェック(2)

目次1 目的1.1 動作イメージ2 Jenkinsジョブを設定2.1 前提2.2 Jenkins「シェルの実行」を設定2.3 想定外ライセンスが含まれていた場合の通知3 まとめ 目的 前回の続き。&n …

adb devicesコマンドでAndroid端末を認識しない

目次1 事象2 原因3 解決 事象 USB接続するAndroidによって以下のエラーが出たりします。 C:\src\ionic\awsomeapp>adb devices List of dev …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

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