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

執筆者:

関連記事

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

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

Angular11から12にアップデートしたらng serveがproductionモードで起動するようになってしまう

既存のAngular11のプロジェクトを12に上げた際に発生。 目次1 環境2 事象3 原因4 対処5 根本原因6 まとめ 環境 Windows 11Node.js 14.15.1Angular13リ …

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

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

スタンドアロンモードのPgAdmin4が開くデフォルトブラウザを変更

PostgreSQL公式GUIクライアントツールの「PgAdmin4」。 PostGISのgeometry型をWeb地図上に表示出来たり、サーバモードで起動すればチーム内で共通的に使えるPostgre …

AngularアプリをPlaywrightテストしてカバレッジを計測する(webpack + istanbul編)

Angular17からはデフォルトのバンドルツールがesbuildに変わったこと、Angular & istanbul形式だとjestのistanbul形式と正確にマージ出来ないことから、An …

 

shingo.nakanishi
 

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