איך להשתמש בספריית moment.js באפליקציית Angular 2 ב-Typescript?

ניסיתי להשתמש בזה עם חיבורי 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(), אני מקבל שגיאה. זה אמור להיות פשוט, מישהו יכול לספק קומבינציה של שורת פקודה/ייבוא שתעבוד?

תשובה #1

עדכון אפריל 2017:

מגרסה 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");

תשובה #2

moment הוא משאב גלובלי של צד שלישי. האובייקט moment חי על window בדפדפן. לכן, לא נכון import אותו באפליקציית Angular2 שלך. במקום זאת, כלול תגית <script> ב-HTML שלך שמטענת את קובץ moment.js.

כדי לשמח את TypeScript אתה יכול להוסיף

declare var moment: any;

בחלק העליון של הקבצים שלך, שם אתה משתמש בזה כדי למנוע שגיאות הידור, או שאתה יכול להשתמש

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

או להשתמש ב-tsd כדי להתקין את קובץ moment.d.ts ש-TypeScript עשוי למצוא בעצמו.

דוגמא

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 שלך או ש-Moment לא יהיה קיים.

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

טעינת מודול moment

ראשית תצטרך להגדיר טוען מודולים כמו System.js כדי לטעון את קבצי moment commonjs

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

לאחר מכן לייבא את moment לקובץ שבו יש צורך השתמש ב

import * as moment from 'moment';

או

import moment = require('moment');

עריכה :

יש גם אפשרויות עם כמה כלי חבילה כמו Webpack או SystemJS builder או Browserify שישאירו את moment מחוץ לאובייקט window. למידע נוסף על אלה, נא לבקר באתרי האינטרנט שלהם להנחיות.

תשובה #3

הבא עבד עבורי.

ראשית, התקן את ההגדרות של סוגים עבור moment.

typings install moment --save

(הערה: לא --ambient)

לאחר מכן, כדי להתגבר על החוסר ביצוא מתאים:

import * as moment from 'moment';

תשובה #4

הייתי בוחר במשהו מהבאים:

npm install moment --save

למערך map בקובץ systemjs.config.js שלך הוסף:

'moment': 'node_modules/moment'

להוסיף למערך packages:

'moment': { defaultExtension: 'js' }

בקובץ component.ts שלך השתמש ב: import * as moment from 'moment/moment';

וזהו. אתה יכול להשתמש מכיתת הרכיב שלך:

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

תשובה #5

אנחנו משתמשים במודולים עכשיו,

נסה import {MomentModule} from 'angular2-moment/moment.module';

לאחר npm install angular2-moment

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

תשובה #6

כדי להשתמש בזה בפרויקט Typescript תצטרך להתקין את moment:

npm install moment --save

לאחר התקנת moment, ניתן להשתמש בו בכל קובץ .ts לאחר ייבואו:

import * as moment from "moment";

תשובה #7

1: התקן את moment באמצעות הפקודה 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');

תשובה #8

--- עדכון 11/01/2017

Typings עכשיו מיושן והוא הוחלף על ידי npm @types. מעכשיו קבלת הצהרות סוגים לא תחייב כלים מלבד npm. כדי להשתמש ב-Moment לא תצטרך להתקין את הגדרות הסוגים דרך @types כי ל-Moment כבר יש את הגדרות הסוגים שלו.

אז, זה מצטמצם ל-3 שלבים בלבד:

1 - התקן את moment שכולל את הגדרות הסוג:

npm install moment --save

2 - הוסף את תגית הסקריפט בקובץ ה-HTML שלך:

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

3 - עכשיו אתה פשוט יכול להשתמש בזה. נקודה.

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

--- תשובה מקורית

זה ניתן לעשות בשלושה שלבים בלבד:

1 - התקן את הגדרת moment - קובץ *.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');