Bagaimana cara menggunakan perpustakaan moment.js di aplikasi skrip 2 sudut?

Saya mencoba menggunakannya dengan binding naskah:

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

test.ts:

import {moment} from 'moment/moment';

Dan tanpa:

npm install moment --save

test.ts:

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

Tetapi ketika saya memanggil moment.format (), saya mendapatkan kesalahan. Harus sederhana, adakah yang bisa memberikan baris perintah / kombinasi impor yang akan berfungsi?

Pembaruan April 2017:

Pada versi 2.13.0, Moment menyertakan file definisi naskah. https://momentjs.com/docs/#/use-it/typescript/

Cukup instal dengan npm, dalam jenis konsol Anda

npm install --save moment

Dan kemudian di aplikasi Angular Anda, impor semudah ini:

import * as moment from 'moment';

Itu saja, Anda mendapatkan dukungan penuh Script!

Suntingan bonus: Untuk mengetikkan variabel atau properti seperti Momentdalam Skrip Anda dapat melakukan ini misalnya:

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

momentadalah sumber daya global pihak ketiga. Objek saat ini hidup windowdi browser. Karenanya itu tidak benar untuk importitu dalam aplikasi angular2 Anda. Alih-alih, sertakan <script>tag dalam html Anda yang akan memuat file moment.js.

Untuk membuat TypeScript senang, Anda dapat menambahkan

declare var moment: any;

di bagian atas file Anda di mana Anda menggunakannya untuk menghentikan kesalahan kompilasi, atau Anda dapat menggunakannya

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

atau gunakan tsd untuk menginstal file moment.d.ts yang mungkin ditemukan TypeScript pada file itu sendiri.

Contoh

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');
}

Pastikan untuk menambahkan tag skrip di html Anda atau momen tidak akan ada.

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

Memuat modul moment

Pertama, Anda perlu mengatur pemuat modul seperti System.js untuk memuat file commonjs saat

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

Kemudian untuk mengimpor momen ke file di mana perlu digunakan

import * as moment from 'moment';

atau

import moment = require('moment');

EDIT:

Ada juga opsi dengan beberapa bundler seperti Webpack atau SystemJS builder atau Browserify yang akan menjaga momen dari objek window. Untuk informasi lebih lanjut tentang ini, silakan kunjungi situs web masing-masing untuk instruksi.

Berikut ini bekerja untuk saya.

Pertama, instal definisi tipe untuk saat ini.

typings install moment --save

(Catatan: BUKAN --ambient)

Kemudian, untuk mengatasi kekurangan ekspor yang tepat:

import * as moment from 'moment';

Saya akan mengikuti:

npm install moment --save

Ke array systemjs.config.jsfile Anda , maptambahkan:

'moment': 'node_modules/moment'

untuk packagesmenambahkan array:

'moment': { defaultExtension: 'js' }

Di component.ts Anda gunakan: import * as moment from 'moment/moment';

dan hanya itu. Anda dapat menggunakan dari kelas komponen Anda:

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

Kami menggunakan modul sekarang,

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

setelah npm install angular2-moment

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

Untuk menggunakannya dalam suatu Typescriptproyek, Anda perlu menginstal momen:

npm install moment --save

Setelah menginstal momen, Anda dapat menggunakannya dalam .tsfile apa pun setelah mengimpornya:

import * as moment from "moment";

--- Perbarui 11/01/2017

Pengetikan sekarang tidak digunakan lagi dan diganti dengan npm @types . Mulai sekarang untuk mendapatkan deklarasi tipe tidak memerlukan alat selain npm. Untuk menggunakan Moment, Anda tidak perlu menginstal definisi tipe melalui @types karena Moment sudah memberikan definisi tipe sendiri.

Jadi, itu berkurang menjadi hanya 3 langkah:

1 - Pasang momen yang mencakup definisi jenis:

npm install moment --save

2 - Tambahkan tag skrip di file HTML Anda:

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

3 - Sekarang Anda bisa menggunakannya. Titik.

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

--- Jawaban asli

Ini dapat dilakukan hanya dalam 3 langkah:

1 - Instal definisi momen - * .d.ts file:

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

2 - Tambahkan tag skrip di file HTML Anda:

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

3 - Sekarang Anda bisa menggunakannya. Titik.

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

Untuk Angular 7+ (Mendukung 8 dan 9 juga) :

1: Instal momen dengan perintah npm install moment --save

2: Jangan menambahkan apa pun di app.module.ts

3: Cukup tambahkan pernyataan impor di atas componentfile Anda atau lainnya seperti ini:import * as moment from 'moment';

4: Sekarang Anda dapat menggunakan momentdi mana saja dalam kode Anda. Seperti:

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

dengan ng CLI

> npm install moment --save

di app.module

import * as moment from 'moment';

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

dalam komponen

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

dengan cara ini Anda mengimpor momen sekali

UPDATE Angular => 5

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

Bagi saya bekerja di prod dengan aot dan juga dengan universal

Saya tidak suka menggunakan apa pun selain menggunakan momen

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

Perpustakaan angular2-saat memiliki pipa seperti {{myDate | amTimeAgo}} untuk digunakan dalam file .html.

Pipa-pipa yang sama itu juga dapat diakses sebagai fungsi-fungsi typescript dalam file kelas komponen (.ts) Pertama instal perpustakaan seperti yang diperintahkan:

npm install --save angular2-moment

Dalam node_modules / angular2-moment sekarang akan menjadi file ".pipe.d.ts" seperti calendar.pipe.d.ts , date-format.pipe.d.ts dan banyak lagi.

Masing-masing berisi nama fungsi Typescript untuk pipa yang sama, misalnya, DateFormatPipe () adalah fungsi untuk amDateFormatPipe .

Untuk menggunakan DateFormatPipe dalam proyek Anda, impor dan tambahkan ke penyedia global Anda di app.module.ts:

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

Kemudian di komponen mana pun yang ingin Anda gunakan fungsinya, impor di atasnya, masukkan ke konstruktor dan gunakan:

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

Untuk menggunakan salah satu fungsi ikuti proses ini. Akan lebih baik jika ada satu cara untuk mendapatkan akses ke semua fungsi, tetapi tidak ada solusi di atas yang berfungsi untuk saya.

Jika Anda boleh menambahkan lebih banyak paket pihak ketiga, saya menggunakan perpustakaan angular2-moment . Instalasi cukup mudah, dan Anda harus mengikuti instruksi terbaru pada README. Saya juga menginstal pengetikan sebagai hasil dari ini.

Bekerja seperti pesona bagi saya, dan nyaris tidak menambahkan kode apa pun untuk membuatnya berfungsi.

Tidak yakin apakah ini masih menjadi masalah bagi orang, namun ... Menggunakan SystemJS dan MomentJS sebagai pustaka, ini menyelesaikannya untuk saya

/*
 * 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;

Bekerja dengan baik dari sana untuk saya.

untuk angular2 RC5 ini bekerja untuk saya ...

instal momen pertama melalui npm

npm install moment --save

Kemudian impor momen di komponen yang ingin Anda gunakan

import * as moment from 'moment';

konfigurasikan saat terakhir di systemjs.config.js "map" dan "paket"

// 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'}
  };

Selain jawaban SnareChop, saya harus mengubah file pengetikan untuk momentjs.

Dalam moment-node.d.tssaya diganti:

export = moment;

dengan

export default moment;

Moment.js sekarang mendukung TypeScript di v2.14.1.

Lihat: https://github.com/moment/moment/pull/3280

Versi saya sendiri menggunakan Moment in 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);    

}

Impor momen pertama sebagai _moment, lalu deklarasikan momentvariabel dengan tipe _moment.Momentdengan nilai awal _moment().

Impor polos saat tidak akan memberi Anda penyelesaian otomatis tetapi jika Anda akan mendeklarasikan momen dengan jenis Momentantarmuka dari _momentnamespace dari'moment' paket yang diinisialisasi dengan momen namespace yang dipanggil _moment()memberi Anda penyelesaian otomatis momen api itu.

Saya pikir ini adalah cara yang paling sudut menggunakan saat tanpa menggunakan @types typingsatau penyedia sudut, jika Anda mencari penyelesaian otomatis untuk perpustakaan javascript vanilla seperti saat.

Coba tambahkan "allowSyntheticDefaultImports": true ke tsconfig.json.

Apa yang dilakukan bendera?

Ini pada dasarnya memberitahu compiler TypeScript bahwa boleh saja menggunakan pernyataan impor ES6, yaitu

import * as moment from 'moment/moment';

pada modul CommonJS seperti Moment.js yang tidak mendeklarasikan ekspor default. Bendera hanya memengaruhi pengecekan tipe, bukan kode yang dihasilkan.

Diperlukan jika Anda menggunakan SystemJS sebagai pemuat modul Anda. Bendera akan dihidupkan secara otomatis jika Anda memberi tahu kompiler TS Anda bahwa Anda menggunakan SystemJS:

"module": "system"

Ini juga akan menghapus kesalahan yang dilakukan oleh IDE jika mereka dikonfigurasi untuk menggunakan tsconfig.json.

untuk angular2 dengan systemjs dan jspm harus dilakukan:

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();

Untuk pengguna ANGULAR CLI

Menggunakan perpustakaan eksternal ada dalam dokumentasi di sini:

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

Cukup instal perpustakaan Anda melalui

npm instal lib-name --save

dan impor dalam kode Anda. Jika perpustakaan tidak menyertakan pengetikan, Anda dapat menginstalnya menggunakan:

npm instal lib-name --save

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

Kemudian buka src / tsconfig.app.json dan tambahkan ke array jenis:

"types": ["lib-name"]

Jika perpustakaan yang Anda tambahkan pengetikan hanya untuk digunakan pada tes e2e Anda, gunakan e2e / tsconfig.e2e.json. Hal yang sama berlaku untuk pengujian unit dan src / tsconfig.spec.json.

Jika perpustakaan tidak memiliki pengetikan yang tersedia di @ types /, Anda masih dapat menggunakannya dengan menambahkan pengetikan secara manual:

Pertama, buat file typings.d.ts di folder src / Anda.

File ini akan secara otomatis dimasukkan sebagai definisi tipe global. Kemudian, di src / typings.d.ts, tambahkan kode berikut:

mendeklarasikan modul 'typeless-package';

Terakhir, di komponen atau file yang menggunakan perpustakaan, tambahkan kode berikut:

impor * sebagai typelessPackage dari 'typeless-package'; typelessPackage.method ();

Selesai Catatan: Anda mungkin perlu atau menemukan berguna untuk mendefinisikan lebih banyak pengetikan untuk perpustakaan yang Anda coba gunakan.

Saya mengikuti saran untuk mengizinkan allowSyntheticDefaultImports (karena tidak ada ekspor dari saat untuk digunakan untuk saya), menggunakan Sistem. Kemudian saya mengikuti saran seseorang untuk menggunakan:

import moment from 'moment';

Dengan saat dipetakan dalam konfigurasi system.js saya. Pernyataan impor lainnya tidak akan berfungsi untuk saya, untuk beberapa alasan

Berikut ini bekerja untuk saya:

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

Momentum-simpul tidak ada dalam repositori pengetikan. Anda harus mengarahkan ke Definitely Typed agar dapat berfungsi menggunakan awalan dt.

Dengan systemjs apa yang saya lakukan adalah, di dalam systemjs.config saya menambahkan peta moment

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

Dan kemudian Anda dapat dengan mudah mengimpor momenthanya dengan melakukan

import * as moment from 'moment'

Saya tahu ini adalah utas lama, tetapi bagi saya solusi paling sederhana yang benar-benar berhasil adalah:

1. Instal terlebih dahulu npm install moment --save
2. Dalam komponen saya yang membutuhkannya dari node_modules dan menggunakannya:

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

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