web-dev-qa-db-ja.com

Angular 2 TypeScriptアプリケーションでのmoment.jsの使用

Angular 2 TypeScriptアプリ内でmoment.jsライブラリを使用するのに苦労しています。 への回答を読んだ後でも、この質問 動作しません。

これは私がこれまでにやったことです：

  • Npmを使用してmoment.jsをインストールしたので、node_modules/moment/moment.jsの下にライブラリを見つけることができます

  • System.jsを構成して、モーメントライブラリを取得しました。

    System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      moment: {
        main: 'moment.js',
        type: 'cjs',
        defaultExtension: 'js'
      }
    },
    map: {
      moment: 'node_modules/moment'
    }
});
  • TypeScriptタイピングをtypings install moment-node --ambient --saveとtypings install moment --ambient --saveでインストールしたので、typings/main/ambient/moment-nodeとtypings/main/ambient/moment内に正しいタイピングが表示されます

今、私のコードでimport * as moment from 'moment'; TypeScriptコンパイルを使用すると、スムーズに実行され、Atomエディター内に正しい提案が表示されます（moment().で開始した場合、 year（）、month（）など）。ただし、ブラウザ内でコードを実行すると、「モーメントは関数ではない」というエラーが表示されます（その瞬間は多くのメソッドを持つオブジェクトであることがわかります） 。

import moment from 'moment';と書いた場合、ブラウザのコードは正常に動作しますが、TypeScriptコンパイルは「モジュールモーメントにデフォルトのエクスポートがありません」で失敗し、書き込み中にAtom=から提案を得ることができません。コード。

何が悪いのですか？ Angular 2 TypeScriptアプリケーション内でmoment.js（および非TypeScriptライブラリ）をインポートする正しい方法は何ですか？

typescriptangularmomentjssystemjs
11
DanyUP
import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;
4
Vladimir Trifonov

さらに下に指摘されているように、現在は独自のタイピングを備えています。また、@ angular/cliも変更されました。これを反映するために私の答えを更新しました。

npm i-瞬間を保存

import * as moment from 'moment';

export class SomeClass implements OnInit {

  date: moment.Moment;

  ngOnInit() {
    this.date = moment();
  }

}

@ angular/cliで必要なのはこれだけです。

以下は私の古い古い回答です。

Angular-cliの場合：VsCodeでIntellisenseを取得します

編集-> angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...

      'moment/min/**', // add this line

      ...
    ]
  });
};

編集-> system-config.ts

const map: any = {
  moment: 'vendor/moment/min/moment.min.js' // add this line
};

あなたのコンポーネントで：

import * as moment from 'moment';

...
// example of usage
dates: moment.Moment[] = [];

ngOnInit() {
  let date = moment();
  date.add(2, 'days');
  this.dates.Push(date);
}
4
Tony Krøger

また私はこれを見つけました：NPMを使用してMoment.jsをインストールします：

npm install moment

それをSystemJS構成に追加します。

map: {
  'angular2': 'node_modules/angular2',
  'rxjs': 'node_modules/rxjs',
  'moment': 'node_modules/moment/moment'
}

次のインターフェイスも必要です：tsd install moment --saveを追加します。

/// <reference path="typings/moment/moment.d.ts" />
import * as moment from 'moment';
1
Vladimir Trifonov

あなたのindex.htmlから追加

 <script src="../node_modules/moment/moment.js"></script>

あなたのコンポーネントで：

declare var moment: any;
...

this.startDate = moment().subtract(15, 'days').format('DD-MM-YYYY');
this.endDate = moment().format('DD-MM-YYYY');
1
Sacky San

namespace構文を使用してモジュールをインポートし、import * as moment from 'moment'のように単一オブジェクトにエクスポートを収集する場合、モジュールがエクスポートする実際のモーメントオブジェクトではなく、そのすべてをインポートしますメンバー。通話署名を失っています。これを解決するには、SystemJS + TypeScriptプロジェクトで、モジュールに「system」の値、またはallowSyntheticDefaultImportsにtrueの値のいずれかを指定し、これらをTypeScriptコンパイラに、できればtsconfig.jsonファイルを介して渡します。 。次に、そのような瞬間をインポートします

import moment from 'moment';

そして、すべてが機能します。

0
Aluan Haddad