Come utilizzare la libreria moment.js in angular 2 typescript app?

Ho provato ad usarlo con i collegamenti typescript:

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

test.ts:

 import {moment} from 'moment/moment'; 

E senza:

 npm install moment --save 

test.ts:

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

Ma quando chiamo moment.format (), ottengo un errore. Dovrebbe essere semplice, qualcuno può fornire una combinazione di riga di comando / importazione che funzionerebbe?

Stiamo usando i moduli ora,

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

dopo npm install angular2-moment

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

Aggiornamento aprile 2017:

A partire dalla versione 2.13.0, Moment include un file di definizione typescript. https://momentjs.com/docs/#/use-it/typescript/

Basta installarlo con npm, nel tuo tipo di console

 npm install --save moment 

E poi nella tua app Angular, l’importazione è facile come questa:

 import * as moment from 'moment'; 

È tutto, avrai pieno supporto a Typescript!

Modifica bonus: per digitare una variabile o una proprietà come Moment in Typescript puoi farlo ad esempio:

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

moment è una risorsa globale di terze parti. Il momento in cui l’object vive nella window del browser. Pertanto non è corretto import nella tua applicazione angular2. Invece includi il tag nel tuo html che caricherà il file moment.js.

Per rendere felice TypeScript puoi aggiungere

 declare var moment: any; 

nella parte superiore dei file in cui viene utilizzato per interrompere gli errori di compilazione o che è ansible utilizzare

 /// 

oppure usa tsd per installare il file moment.d.ts che TypeScript potrebbe trovare sul proprio.

Esempio

 import {Component} from 'angular2/core'; declare var moment: any; @Component({ selector: 'example', template: '

Today is {{today}}

' }) export class ExampleComponent{ today: string = moment().format('D MMM YYYY'); }

Assicurati di aggiungere il tag script nel tuo html o il momento non esisterà.

  

moment caricamento del modulo

Per prima cosa è necessario configurare un caricatore di moduli come System.js per caricare i file commonjs del momento

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

Quindi per importare il momento nel file dove necessario

 import * as moment from 'moment'; 

o

 import moment = require('moment'); 

MODIFICARE:

Ci sono anche opzioni con alcuni bundler come Webpack o SystemJS builder o Browserify che manterranno il momento fuori dall'object della finestra. Per ulteriori informazioni su questi, si prega di visitare i rispettivi siti Web per le istruzioni.

Il seguente ha funzionato per me.

Innanzitutto, installa le definizioni dei tipi per il momento.

typings install moment --save

(Nota: NON – --ambient )

Quindi, per ovviare alla mancanza di un’esportazione corretta:

 import * as moment from 'moment'; 

Vorrei andare con il seguente:

npm install moment --save

systemjs.config.js tuo systemjs.config.js l’array di map del file systemjs.config.js :

'moment': 'node_modules/moment'

ai packages array aggiungere:

'moment': { defaultExtension: 'js' }

Nel tuo component.ts usa: import * as moment from 'moment/moment';

e questo è tutto. Puoi utilizzare dalla class del tuo componente:

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

Per utilizzarlo in un progetto Typescript è necessario installare il momento:

npm install moment --save

Dopo aver installato il momento, puoi usarlo in qualsiasi file .ts dopo averlo importato:

import * as moment from "moment";

— Aggiornamento 11/01/2017

La tipizzazione è ora deprecata ed è stata sostituita da npm @types . D’ora in poi ottenere le dichiarazioni di tipo non richiederà strumenti oltre a npm. Per utilizzare Moment non è necessario installare le definizioni del tipo tramite @types poiché Moment fornisce già le proprie definizioni di tipo.

Quindi, riduce a soli 3 passaggi:

1 – Installa il momento che include le definizioni del tipo:

 npm install moment --save 

2 – Aggiungi il tag dello script nel tuo file HTML:

  

3 - Ora puoi usarlo. Periodo.

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

--- Risposta originale

Questo può essere fatto in soli 3 passaggi:

1 - Installa definizione momento - file * .d.ts :

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

2 - Aggiungi il tag dello script nel tuo file HTML:

  

3 - Ora puoi usarlo. Periodo.

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

La libreria angular2-moment ha pipe come {{myDate | amTimeAgo}} da usare in file .html.

È ansible accedere a queste stesse pipe anche come funzioni Typescript all’interno di un file di class componente (.ts). Innanzitutto installa la libreria come indicato:

 npm install --save angular2-moment 

In node_modules / angular2-moment saranno ora file “.pipe.d.ts” come calendar.pipe.d.ts , date-format.pipe.d.ts e molti altri.

Ciascuno di questi contiene il nome della funzione Typescript per la pipe equivalente, ad esempio, DateFormatPipe () è la funzione per amDateFormatPipe .

Per utilizzare DateFormatPipe nel progetto, importarlo e aggiungerlo ai provider globali in app.module.ts:

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

Quindi, in qualsiasi componente in cui si desidera utilizzare la funzione, importarla in cima, inserirla nel costruttore e utilizzare:

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

Per utilizzare una qualsiasi delle funzioni seguire questa procedura. Sarebbe bello se ci fosse un modo per accedere a tutte le funzioni, ma nessuna delle soluzioni di cui sopra ha funzionato per me.

con ng CLI

 > npm install moment --save 

in app.module

 import * as moment from 'moment'; providers: [{ provide: 'moment', useValue: moment }] 

nel componente

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

in questo modo importi un momento una volta

AGGIORNAMENTO Angolare => 5

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

Per me lavora in prod con aot e anche con universale

Non mi piace usare qualsiasi cosa ma usando moment.Moment I got

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

Se stai bene aggiungendo altri pacchetti di terze parti, ho usato la libreria angular2-moment . L’installazione è stata abbastanza semplice e dovresti seguire le ultime istruzioni sul README. Ho anche installato tipizzazioni come risultato di questo.

Ha funzionato come un incantesimo per me e ha aggiunto a malapena qualsiasi codice per farlo funzionare.

Non sono sicuro se questo è ancora un problema per le persone, tuttavia … Usando SystemJS e MomentJS come libreria, questo lo ha risolto per me

 /* * 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 = (moment).default || moment; 

Funziona bene da lì per me.

per angular2 RC5 questo ha funzionato per me …

primo istante di installazione via npm

 npm install moment --save 

Quindi importare il momento nel componente che si desidera utilizzare

 import * as moment from 'moment'; 

infine configurare il momento in systemjs.config.js “map” e “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'} }; 

Moment.js ora supporta TypeScript in v2.14.1.

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

Oltre alla risposta di SnareChop, ho dovuto modificare il file di battitura per i momentjs.

In moment-node.d.ts ho sostituito:

 export = moment; 

con

 export default moment; 

Prova ad aggiungere "allowSyntheticDefaultImports": true al tuo tsconfig.json .

Cosa fa la bandiera?

Questo in pratica dice al compilatore di TypeScript che va bene usare una dichiarazione di importazione ES6, es

 import * as moment from 'moment/moment'; 

su un modulo CommonJS come Moment.js che non dichiara un’esportazione predefinita. Il flag influenza solo il controllo del tipo, non il codice generato.

È necessario se usi SystemJS come caricatore di moduli. Il flag si accenderà automaticamente se dirai al tuo compilatore TS che usi SystemJS:

 "module": "system" 

Ciò rimuoverà anche eventuali errori lanciati dagli IDE se sono configurati per utilizzare tsconfig.json .

per angular2 con systemjs e jspm dovevamo fare:

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

Per gli utenti ANGULAR CLI

L’uso di librerie esterne è nella documentazione qui:

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

Basta installare la tua libreria tramite

npm installa lib-name –save

e importalo nel tuo codice. Se la libreria non include le tipizzazioni, è ansible installarle utilizzando:

npm installa lib-name –save

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

Quindi apri src / tsconfig.app.json e aggiungilo all’array dei tipi:

“tipi”: [“nome-lib”]

Se la libreria che hai aggiunto per la tipizzazione deve essere utilizzata solo sui tuoi test e2e, usa invece e2e / tsconfig.e2e.json. Lo stesso vale per i test unitari e src / tsconfig.spec.json.

Se la libreria non ha digitazioni disponibili in @ types /, puoi comunque utilizzarla aggiungendo manualmente i tipi per essa:

Per prima cosa, crea un file typings.d.ts nella tua src / cartella.

Questo file verrà automaticamente incluso come definizione del tipo globale. Quindi, in src / typings.d.ts, aggiungi il seguente codice:

dichiarare il modulo ‘typeless-package’;

Infine, nel componente o nel file che utilizza la libreria, aggiungi il seguente codice:

import * come typelessPackage da ‘typeless-package’; typelessPackage.method ();

Fatto. Nota: potrebbe essere necessario o utile trovare ulteriori tipi di tipizzazione per la libreria che si sta tentando di utilizzare.

Quanto segue ha funzionato per me:

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

Il nodo momento non esiste nel repository dattilografi. È necessario redirect a Definitely Typed per farlo funzionare utilizzando il prefisso dt.

Con systemjs quello che ho fatto è, dentro il mio systemjs.config ho aggiunto la mappa per il moment

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

E quindi puoi facilmente importare il moment semplicemente facendo

 import * as moment from 'moment' 

So che è un vecchio thread, ma per me la soluzione più semplice che ha funzionato è stata:

  1. Installandolo prima npm install moment --save
  2. Nei miei componenti lo richiedono da node_modules e lo uso:
 const moment = require('../../../node_modules/moment/moment.js'); @Component({...}) export class MyComponent { ... ngOnInit() { this.now = moment().format(); } ... } 

La mia versione di utilizzo di 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); } 

Primo momento di importazione come _moment , quindi dichiara la variabile moment con tipo _moment.Moment con un valore iniziale di _moment() .

La semplice importazione del momento non ti dà alcun completamento automatico, ma se dichiarerai il momento con il tipo di interfaccia Moment da _moment namespace dal pacchetto 'moment' inizializzato con lo spazio dei nomi momento invocato _moment() ti darà il completamento automatico delle API del momento.

Penso che questo sia il modo più angular di usare il momento senza usare @types typings o provider angolari, se stai cercando il completamento automatico per le librerie javascript di vanilla come il momento.

Ho seguito i consigli per consentire allowSyntheticDefaultImports (dal momento che non c’è nessuna esportazione dal momento da usare per me), usando System. Poi ho seguito il consiglio di qualcuno da usare:

 import moment from 'moment'; 

Con il momento che viene mappato nel mio system.js config. Le altre dichiarazioni di importazione non funzionerebbero per me, per qualche motivo