วิธีการใช้ห้องสมุด 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');

แต่เมื่อฉันเรียกโมเมนต์รูปแบบ () ฉันได้รับข้อผิดพลาด ควรจะเรียบง่ายหรือไม่ทุกคนสามารถให้ชุดคำสั่ง / ชุดการนำเข้าที่จะทำงานได้หรือไม่

อัปเดตเมษายน 2560:

ตั้งแต่เวอร์ชัน 2.13.0 Moment มีไฟล์นิยาม typescript https://momentjs.com/docs/#/use-it/typescript/

เพียงติดตั้งด้วย npm ในประเภทคอนโซลของคุณ

npm install --save moment

จากนั้นในแอพเชิงมุมของคุณการนำเข้านั้นง่ายเหมือนนี้

import * as moment from 'moment';

แค่นั้นแหละคุณจะได้รับการสนับสนุนจาก typescript เต็ม!

การแก้ไขโบนัส:หากต้องการพิมพ์ตัวแปรหรือคุณสมบัติเช่นเดียวกับMomentใน typescript คุณสามารถทำได้เช่น:

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

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 ของคุณหรือช่วงเวลาที่ไม่มีอยู่

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

การโหลดโมดูล moment

ก่อนอื่นคุณต้องติดตั้งโมดูลโหลดเดอร์เช่น System.jsเพื่อโหลดไฟล์ commonjs ในขณะนั้น

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 ที่จะช่วยให้คุณไม่พลาดวัตถุหน้าต่าง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งเหล่านี้กรุณาเยี่ยมชมเว็บไซต์ของพวกเขาสำหรับการเรียนการสอน

ต่อไปนี้ใช้งานได้สำหรับฉัน

ก่อนอื่นให้ติดตั้งข้อกำหนดประเภทชั่วครู่

typings install moment --save

(หมายเหตุ: ไม่--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";

--- ปรับปรุง 11/01/2017

typingsจะเลิกตอนนี้และมันถูกแทนที่ด้วย@types NPM นับจากนี้ไปการรับการประกาศประเภทจะไม่ต้องใช้เครื่องมือใดนอกจาก npm ในการใช้ช่วงเวลาคุณไม่จำเป็นต้องติดตั้งคำจำกัดความประเภทผ่าน @typesเนื่องจาก Moment ได้ให้คำจำกัดความประเภทไว้แล้ว

ดังนั้นจะลดลงเหลือเพียง 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');

สำหรับAngular 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)

ด้วยวิธีนี้คุณนำเข้าช่วงเวลาหนึ่งครั้ง

UPDATE Angular => 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

ไปป์เดียวกันนั้นยังสามารถเข้าถึงได้เป็นฟังก์ชัน typescript ภายในไฟล์ component class (.ts) ก่อนติดตั้งห้องสมุดตามคำแนะนำ:

npm install --save angular2-moment

ใน node_modules / angular2-moment จะเป็นไฟล์ ".pipe.d.ts" เช่นcalendar.pipe.d.ts , date-format.pipe.d.tsและอื่น ๆ อีกมากมาย

แต่ละรายการมีชื่อฟังก์ชัน typescript สำหรับไพพ์เทียบเท่าเช่นDateFormatPipe ()เป็นฟังก์ชันสำหรับamDateFormatPipe 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');
}

หากต้องการใช้ฟังก์ชันใด ๆ ให้ทำตามกระบวนการนี้ มันจะดีถ้ามีวิธีหนึ่งในการเข้าถึงฟังก์ชั่นทั้งหมด แต่ไม่มีวิธีการแก้ปัญหาข้างต้นสำหรับฉัน

หากคุณกำลังถูกเพิ่มแพคเกจอื่น ๆ ของบุคคลที่สามผมใช้angular2 ช่วงเวลาห้องสมุด การติดตั้งค่อนข้างตรงไปตรงมาและคุณควรทำตามคำแนะนำล่าสุดของ 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" และ "packages"

// 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.tsฉันแทนที่:

export = moment;

กับ

export default moment;

Moment.js รองรับ TypeScript ใน v2.14.1 แล้ว

ดู: https://github.com/moment/moment/pull/3280

รุ่นของฉันเองในการใช้ช่วงเวลาในเชิงมุม

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อินเตอร์เฟสจาก_momentเนมสเปซจาก'moment'แพคเกจเริ่มต้นด้วยช่วงเวลาที่เรียกว่าเนมสเปซ_moment()ช่วยให้คุณเสร็จอัตโนมัติของช่วงเวลาของ API ของ

ฉันคิดว่านี่เป็นวิธีการเชิงช่วงเวลาที่ดีที่สุดในการใช้ช่วงเวลาโดยไม่ต้องใช้@types typingsหรือผู้ให้บริการเชิงมุมหากคุณกำลังมองหาการทำให้สมบูรณ์อัตโนมัติสำหรับห้องสมุดวานิลลาจาวาสคริปต์เช่นช่วงเวลา

ลองเพิ่ม"allowSyntheticDefaultImports": trueของคุณtsconfig.jsonที่คุณ

ธงทำอะไร

โดยพื้นฐานแล้วจะบอกคอมไพเลอร์ TypeScript ว่าไม่เป็นไรที่จะใช้คำสั่งการนำเข้า ES6 เช่น

import * as moment from 'moment/moment';

ในโมดูล CommonJS เช่น Moment.js ซึ่งไม่ได้ประกาศการส่งออกเริ่มต้น การตั้งค่าสถานะมีผลกับการตรวจสอบประเภทไม่ใช่รหัสที่สร้างขึ้น

จำเป็นถ้าคุณใช้ SystemJS เป็นโมดูลโหลดเดอร์ของคุณ การตั้งค่าสถานะจะเปิดโดยอัตโนมัติถ้าคุณบอกคอมไพเลอร์ TS ของคุณว่าคุณใช้ SystemJS:

"module": "system"

นอกจากนี้ยังจะลบข้อผิดพลาดใด ๆ โยนโดย IDEs tsconfig.jsonถ้าพวกเขามีการกำหนดค่าที่จะทำให้การใช้งานของ

สำหรับ angular2 กับ systemjs และ jspm ต้องทำ:

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 ติดตั้ง lib-name - บันทึก

และนำเข้ามาในรหัสของคุณ หากไลบรารีไม่มีการพิมพ์คุณสามารถติดตั้งโดยใช้:

npm ติดตั้ง lib-name - บันทึก

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

จากนั้นเปิด src / tsconfig.app.json และเพิ่มลงในอาร์เรย์ประเภท:

"types": ["lib-name"]

หากไลบรารีที่คุณเพิ่มการพิมพ์นั้นใช้สำหรับการทดสอบ e2e ของคุณเท่านั้นให้ใช้ e2e / tsconfig.e2e.json แทน เช่นเดียวกันสำหรับการทดสอบหน่วยและ src / tsconfig.spec.json

หากไลบรารีไม่มีการพิมพ์ที่ @ types / คุณยังสามารถใช้งานได้โดยเพิ่มการพิมพ์ด้วยตนเอง:

ก่อนอื่นให้สร้างไฟล์ typings.d.ts ใน src / โฟลเดอร์ของคุณ

ไฟล์นี้จะถูกรวมโดยอัตโนมัติเป็นคำจำกัดความประเภททั่วโลก จากนั้นใน src / typings.d.ts เพิ่มรหัสต่อไปนี้:

ประกาศโมดูล 'typeless-package';

สุดท้ายในคอมโพเนนต์หรือไฟล์ที่ใช้ไลบรารีให้เพิ่มรหัสต่อไปนี้:

นำเข้า * เป็น typelessPackage จาก 'typeless-package'; typelessPackage.method ();

เสร็จสิ้น หมายเหตุ: คุณอาจต้องการหรือพบว่ามีประโยชน์ในการกำหนดการพิมพ์เพิ่มเติมสำหรับไลบรารีที่คุณพยายามใช้

ฉันทำตามคำแนะนำเพื่อให้ AllowSyntheticDefaultImports (เนื่องจากไม่มีการส่งออกจากช่วงเวลาที่จะใช้สำหรับฉัน) โดยใช้ระบบ จากนั้นฉันก็ทำตามคำแนะนำของใครบางคนที่จะใช้:

import moment from 'moment';

ด้วยช่วงเวลาที่ถูกแมปในการกำหนดค่า system.js ของฉัน ข้อความนำเข้าอื่น ๆ ใช้ไม่ได้สำหรับฉันด้วยเหตุผลบางอย่าง

การทำงานต่อไปนี้สำหรับฉัน:

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

ช่วงเวลา - โหนดไม่มีอยู่ในที่เก็บการพิมพ์ คุณต้องเปลี่ยนเส้นทางไปยังประเภทที่แน่นอนเพื่อให้สามารถใช้งานได้โดยใช้คำนำหน้า dt

ด้วย 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();
   }
   ...
}