angular nodejs trouble shooting 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, trouble shooting, typescript

執筆者:

関連記事

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 …

ionicアプリを多言語化する

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

正規表現結果をHTMLコード化してマッチ部分をハイライト表示

やりたかったのは「Rubular」が提供してくれるマッチした部分をハイライトしてくれる機能。 https://rubular.com/ ちょっとしたツールにこういう機能を入れようと思ったのですが、ニー …

Apple PayのMerchant Doamin設定がPendingになり、Verifiedにならなかった原因

開発しているWebシステム上でApple Payによるクレジットカード選択が出来るようにするには「Apple Developer Program」で「Merchant Domain」を設定します。 O …

EclipseのXMLエディタ一行目でDTDエラー「参照ファイルにエラーが含まれています」

目次1 事象2 原因3 対処4 まとめ 事象 checkstyleのルールXMLをEclipseで開くと一行目にエラーマーク。 カーソルを合わせた時のメッセージ。 XMLのデータ構造整合性をチェックす …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。