Angular 2 Typescriptアプリでmoment.jsライブラリを使用する方法

私はそれをtypescriptバインディングで使用しようとしました：

npm install moment --save
typings install moment --ambient -- save

test.ts：

import {moment} from 'moment/moment';

そしてなし：

npm install moment --save

test.ts：

var moment = require('moment/moment');

しかし、moment.format（）を呼び出すと、エラーが発生します。簡単なはずですが、誰もが機能するコマンドライン/インポートの組み合わせを提供できますか？

2017年4月の更新：

バージョン2.13.0以降、Momentにはtypescript定義ファイルが含まれています。https://momentjs.com/docs/#/use-it/typescript/

コンソールタイプにnpmでインストールするだけです

npm install --save moment

そして、Angularアプリでは、インポートは次のように簡単です。

import * as moment from 'moment';

それだけです。Typescriptを完全にサポートします。

ボーナス編集：Moment Typescriptのように変数またはプロパティを入力するには、次のようにします。

let myMoment: moment.Moment = moment("someDate");

momentサードパーティのグローバルリソースです。windowブラウザでオブジェクトが存続する瞬間。そのためimport、angular2アプリケーションでは正しくありません。代わりに、<script>moment.jsファイルをロードするタグをHTMLに含めます。

TypeScriptを幸せにするために、次を追加できます。

declare var moment: any;

あなたがそれを使用してコンパイルエラーを停止するファイルの上部に、またはあなたは

///<reference path="./path/to/moment.d.ts" />

または、tsdを使用して、TypeScriptが独自に見つけたmoment.d.tsファイルをインストールします。

例

import {Component} from 'angular2/core';
declare var moment: any;

@Component({
    selector: 'example',
    template: '<h1>Today is {{today}}</h1>'
})
export class ExampleComponent{
    today: string = moment().format('D MMM YYYY');
}

HTMLにスクリプトタグを追加してください。そうしないと、存在しなくなります。

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

モジュールの読み込み moment

まず、瞬間commonjsファイルをロードするためにSystem.jsなどのモジュールローダーをセットアップする必要があります。

System.config({
    ...
    packages: {
        moment: {
            map: 'node_modules/moment/moment.js',
            type: 'cjs',
            defaultExtension: 'js'
        }
    }
});

次に、必要に応じてファイルに瞬間をインポートするには

import * as moment from 'moment';

または

import moment = require('moment');

編集：

WebpackやSystemJSビルダー、Browserifyなどの一部のバンドラーには、ウィンドウオブジェクトから離れるオプションもあります。これらの詳細については、それぞれのWebサイトにアクセスしてください。

以下は私のために働いた。

まず、瞬間の型定義をインストールします。

typings install moment --save

（注：NOT --ambient）

次に、適切なエクスポートの欠如を回避するには：

import * as moment from 'moment';

私は以下で行きます：

npm install moment --save

あなたへのsystemjs.config.jsファイルのmap配列を追加：

'moment': 'node_modules/moment'

packages配列追加：

'moment': { defaultExtension: 'js' }

あなたのcomponent.tsで使用します： import * as moment from 'moment/moment';

以上です。コンポーネントのクラスから使用できます：

today: string = moment().format('D MMM YYYY');

現在モジュールを使用しています。

試す import {MomentModule} from 'angular2-moment/moment.module';

後 npm install angular2-moment

http://ngmodules.org/modules/angular2-moment

Typescriptプロジェクトでそれを使用するには、瞬間をインストールする必要があります：

npm install moment --save

瞬間をインストールした後、それを.tsインポートした後、任意のファイルで使用できます。

import * as moment from "moment";

--- 2017年11月1日更新

タイピングは廃止され、npm @typesに置き換えられました。今後は、型宣言を取得するためにnpm以外のツールは必要ありません。Momentはすでに独自の型定義を提供しているため、Moment を使用するために@typesを介して型定義をインストールする必要はありません。

したがって、それはたった3つのステップに削減されます。

1-タイプの定義を含むインストールの瞬間：

npm install moment --save

2-HTMLファイルにスクリプトタグを追加します。

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

3-これで使用できます。限目。

today: string = moment().format('D MMM YYYY');

---元の答え

これは、わずか3つのステップで実行できます。

1-モーメント定義をインストール- * .d.tsファイル：

typings install --save --global dt~moment dt~moment-node

2-HTMLファイルにスクリプトタグを追加します。

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

3-これで使用できます。限目。

today: string = moment().format('D MMM YYYY');

用角度7+（支持体8とも9） ：

1：コマンドで瞬間をインストール npm install moment --save

2：に何も追加しないでください app.module.ts

3：次のcomponentように、あなたまたは他のファイルの上にインポート文を追加するだけです：import * as moment from 'moment';

4：momentコードのどこでも使用できるようになりました。と同じように：

myDate = moment(someDate).format('MM/DD/YYYY HH:mm');

ng CLIを使用

> npm install moment --save

app.module

import * as moment from 'moment';

providers: [{ provide: 'moment', useValue: moment }]

コンポーネントで

constructor(@Inject('moment') private moment)

この方法で、瞬間をインポートします

更新角度=> 5

{
   provide: 'moment', useFactory: (): any => moment
}

私にとってaotとユニバーサルの両方で製品を使用しています

私はモーメントを使う以外は好きではありません。

Error   Typescript  Type 'typeof moment' is not assignable to type 'Moment'. Property 'format' is missing in type 'typeof moment'.

angular2-momentライブラリには、{{myDate | amTimeAgo}}を.htmlファイルで使用します。

これらの同じパイプは、コンポーネントクラス（.ts）ファイル内のTypescript関数としてもアクセスできます。最初に、指示に従ってライブラリをインストールします。

npm install --save angular2-moment

node_modules / angular2-momentには、現在、calendar.pipe.d.ts、date-format.pipe.d.tsなどの「.pipe.d.ts」ファイルがあります。

これらのそれぞれには、同等のパイプのTypescript関数名が含まれています。たとえば、DateFormatPipe（）はamDateFormatPipeの関数です。

プロジェクトでDateFormatPipeを使用するには、インポートしてapp.module.tsのグローバルプロバイダーに追加します。

import { DateFormatPipe } from "angular2-moment";
.....
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, ...., DateFormatPipe]

次に、関数を使用するコンポーネントで、それを上にインポートし、コンストラクターに注入して使用します。

import { DateFormatPipe } from "angular2-moment";
....
constructor(.......,  public dfp: DateFormatPipe) {
    let raw = new Date(2015, 1, 12);
    this.formattedDate = dfp.transform(raw, 'D MMM YYYY');
}

関数のいずれかを使用するには、このプロセスに従います。すべての機能にアクセスする方法が1つあればいいのですが、上記の解決策はどれもうまくいきませんでした。

さらにサードパーティのパッケージを追加しても問題ない場合は、angular2-momentライブラリを使用しました。インストールは非常に簡単で、READMEの最新の指示に従う必要があります。その結果、タイピングもインストールしました。

私にとっては魅力のように動作し、動作させるためにコードを追加することはほとんどありませんでした。

これがまだ人々の問題であるかどうかはわかりません...ライブラリとしてSystemJSとMomentJSを使用すると、これで解決しました

/*
 * Import Custom Components
 */
import * as moment from 'moment/moment'; // please use path to moment.js file, extension is set in system.config

// under systemjs, moment is actually exported as the default export, so we account for that
const momentConstructor: (value?: any) => moment.Moment = (<any>moment).default || moment;

そこから私のためにうまくいきます。

angular2 RC5の場合、これは私にとってうまくいきました...

npmによる最初のインストールの瞬間

npm install moment --save

次に、使用するコンポーネントにモーメントをインポートします

import * as moment from 'moment';

最後にsystemjs.config.jsの「マップ」と「パッケージ」でモーメントを設定します

// map tells the System loader where to look for things
  var map = {
  ....
  'moment':                     'node_modules/moment'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    ...
    'moment':                       { main:'moment', defaultExtension: 'js'}
  };

SnareChopの回答に加えて、momentjsの入力ファイルを変更する必要がありました。

ではmoment-node.d.tsI置き換えます：

export = moment;

と

export default moment;

Moment.jsは、v2.14.1でTypeScriptをサポートするようになりました。

参照：https : //github.com/moment/moment/pull/3280

Angularでモーメントを使用する私のバージョン

npm i moment --save

import * as _moment from 'moment';

...

moment: _moment.Moment = _moment();

constructor() { }

ngOnInit() {

    const unix = this.moment.format('X');
    console.log(unix);    

}

最初にモーメントをとしてインポートし_moment、次に初期値がのmomentタイプ_moment.Momentで変数を宣言します_moment()。

モーメントのプレーンインポートでは自動補完は行われませんが、呼び出されたモーメントネームスペースで初期化されたパッケージのネームスペースからタイプMomentインターフェースでモーメントを宣言すると、モーメントのAPIが自動補完されます。_moment'moment'_moment()

@types typingsモーメントのようなバニラJavaScriptライブラリのオートコンプリートを探している場合、これは使用せずに、または角度プロバイダーなしでモーメントを使用する最も角度のある方法だと思います。

に追加"allowSyntheticDefaultImports": trueしてみてくださいtsconfig.json。

フラグは何をしますか？

これは基本的に、TypeScriptコンパイラーに、ES6インポートステートメントを使用しても問題ないことを伝えます。

import * as moment from 'moment/moment';

デフォルトのエクスポートを宣言しないMoment.jsのようなCommonJSモジュール。フラグは型チェックにのみ影響し、生成されたコードには影響しません。

SystemJSをモジュールローダーとして使用する場合に必要です。SystemJSを使用することをTSコンパイラーに指示すると、フラグは自動的にオンになります。

"module": "system"

これにより、IDEがを使用するように構成されている場合、IDEによってスローされたエラーも削除されますtsconfig.json。

systemjsとjspmを使用するangular2の場合は、次のことを行う必要がありました：

import * as moment_ from 'moment';
export const moment =  moment_["default"];

var a = moment.now();
var b = moment().format('dddd');
var c = moment().startOf('day').fromNow();

ANGULAR CLIユーザーの場合

外部ライブラリの使用は、ここのドキュメントにあります：

https://github.com/angular/angular-cli/wiki/stories-third-party-lib

ライブラリをインストールするだけです

npm install lib-name --save

コードにインポートします。ライブラリにタイピングが含まれていない場合は、以下を使用してそれらをインストールできます。

npm install lib-name --save

npm install @ types / lib-name --save-dev

次に、src / tsconfig.app.jsonを開き、タイプ配列に追加します。

"タイプ"：["lib-name"]

タイプを追加したライブラリがe2eテストでのみ使用される場合は、代わりにe2e / tsconfig.e2e.jsonを使用します。単体テストとsrc / tsconfig.spec.jsonについても同様です。

ライブラリのタイプが@ types /で利用できない場合でも、手動でタイプを追加して使用できます。

まず、src /フォルダーにtypings.d.tsファイルを作成します。

このファイルは、グローバルタイプ定義として自動的に含まれます。次に、src / typings.d.tsに次のコードを追加します。

モジュール 'typeless-package'を宣言します。

最後に、ライブラリを使用するコンポーネントまたはファイルに、次のコードを追加します。

import * as typelessPackage from 'typeless-package'; typelessPackage.method（）;

できました。注：使用しようとしているライブラリーのタイプをさらに定義する必要がある、または役立つ場合があります。

Systemを使用して、allowSyntheticDefaultImportsを許可するためのアドバイスに従いました（使用する瞬間からのエクスポートがないため）。それから私は誰かのアドバイスに従って使用しました：

import moment from 'moment';

私のsystem.js設定にマッピングされている瞬間。他のインポート文は、何らかの理由で私には機能しません

以下は私のために働きました：

typings install dt~moment-node --save --global

モーメントノードがタイピングリポジトリに存在しません。プレフィックスdtを使用して機能させるには、Definitely Typedにリダイレクトする必要があります。

私がしたことはsystemjsで、私のsystemjs.config内に私はのためのマップを追加しました moment

map: {
   .....,
   'moment': 'node_modules/moment/moment.js',
   .....
}

そして、あなたはmoment単に行うだけで簡単にインポートすることができます

import * as moment from 'moment'

私はそれが古いスレッドであることを知っていますが、私にとって実際に機能した最も簡単な解決策は次のとおりでした：

1. 最初にインストールする npm install moment --save
2. node_modulesからそれを必要とする私のコンポーネントで、それを使用します：

const moment = require('../../../node_modules/moment/moment.js');

@Component({...})
export class MyComponent {
   ...
   ngOnInit() {
       this.now = moment().format();
   }
   ...
}