Comment utiliser la bibliothèque moment.js dans l'application de dactylographie angulaire 2?

J'ai essayé de l'utiliser avec des liaisons typographiques:

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

test.ts:

import {moment} from 'moment/moment';

Et sans:

npm install moment --save

test.ts:

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

Mais lorsque j'appelle moment.format (), j'obtiens une erreur. Devrait être simple, quelqu'un peut-il fournir une combinaison ligne de commande / importation qui fonctionnerait?

Mise à jour d'avril 2017:

À partir de la version 2.13.0, Moment inclut un fichier de définition typographique. https://momentjs.com/docs/#/use-it/typescript/

Installez-le simplement avec npm, dans votre type de console

npm install --save moment

Et puis, dans votre application Angular, l'importation est aussi simple que cela:

import * as moment from 'moment';

Voilà, vous obtenez un support complet de Typescript!

Edition bonus: Pour taper une variable ou une propriété comme Momentdans Typo, vous pouvez le faire par exemple:

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

momentest une ressource mondiale tierce. Le moment où l'objet survit windowdans le navigateur. Il n'est donc pas correct importdans votre application angular2. À la place, incluez la <script>balise dans votre html qui chargera le fichier moment.js.

Pour rendre TypeScript heureux, vous pouvez ajouter

declare var moment: any;

en haut de vos fichiers où vous l'utilisez pour arrêter les erreurs de compilation, ou vous pouvez utiliser

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

ou utilisez tsd pour installer le fichier moment.d.ts que TypeScript pourrait trouver par lui-même.

Exemple

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

Assurez-vous simplement d'ajouter la balise de script dans votre html ou le moment n'existera pas.

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

Chargement du module moment

Vous devez d'abord configurer un chargeur de module tel que System.js pour charger les fichiers commonjs du moment

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

Ensuite, pour importer le moment dans le fichier si nécessaire, utilisez

import * as moment from 'moment';

ou

import moment = require('moment');

ÉDITER:

Il existe également des options avec certains bundleurs tels que Webpack ou SystemJS builder ou Browserify qui garderont un moment hors de l'objet fenêtre. Pour plus d'informations à ce sujet, veuillez consulter leurs sites Web respectifs pour obtenir des instructions.

Ce qui suit a fonctionné pour moi.

Tout d'abord, installez les définitions de type pour le moment.

typings install moment --save

(Remarque: NON --ambient)

Ensuite, pour contourner l'absence d'une exportation appropriée:

import * as moment from 'moment';

J'irais avec ce qui suit:

npm install moment --save

Au tableau de votre systemjs.config.jsfichier, mapajoutez:

'moment': 'node_modules/moment'

au packagestableau, ajoutez:

'moment': { defaultExtension: 'js' }

Dans votre component.ts utilisez: import * as moment from 'moment/moment';

et c'est tout. Vous pouvez utiliser de la classe de votre composant:

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

Nous utilisons des modules maintenant,

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

après npm install angular2-moment

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

Pour l'utiliser dans un Typescriptprojet, vous devrez installer moment:

npm install moment --save

Après avoir installé moment, vous pouvez l'utiliser dans n'importe quel .tsfichier après l'avoir importé:

import * as moment from "moment";

--- Mise à jour 11/01/2017

Les saisies sont désormais obsolètes et ont été remplacées par npm @types . Désormais, obtenir des déclarations de type ne nécessitera aucun outil en dehors de npm. Pour utiliser Moment, vous n'aurez pas besoin d'installer les définitions de type via @types car Moment fournit déjà ses propres définitions de type.

Ainsi, il se réduit à seulement 3 étapes:

1 - Moment d'installation qui inclut les définitions de type:

npm install moment --save

2 - Ajoutez la balise script dans votre fichier HTML:

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

3 - Maintenant, vous pouvez simplement l'utiliser. Période.

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

--- Réponse originale

Cela peut se faire en seulement 3 étapes:

1 - Installer la définition du moment - fichier * .d.ts :

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

2 - Ajoutez la balise script dans votre fichier HTML:

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

3 - Maintenant, vous pouvez simplement l'utiliser. Période.

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

Pour Angular 7+ (prend également en charge 8 et 9) :

1: installez moment par commande npm install moment --save

2: N'ajoutez rien dans le app.module.ts

3: Ajoutez simplement une déclaration d'importation en haut de votre componentfichier ou de tout autre fichier comme celui-ci:import * as moment from 'moment';

4: Vous pouvez maintenant utiliser momentn'importe où dans votre code. Juste comme:

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

avec ng CLI

> npm install moment --save

dans app.module

import * as moment from 'moment';

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

dans le composant

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

de cette façon, vous importez le moment une fois

MISE À JOUR Angulaire => 5

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

Pour moi travaille en prod avec aot et aussi avec universal

Je n'aime pas en utiliser mais j'utilise l'instant.

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

La bibliothèque angular2-moment a des canaux comme {{myDate | amTimeAgo}} à utiliser dans les fichiers .html.

Ces mêmes canaux sont également accessibles en tant que fonctions Typescript dans un fichier de classe de composant (.ts). Installez d'abord la bibliothèque comme indiqué:

npm install --save angular2-moment

Dans le node_modules / angular2-moment seront désormais des fichiers ".pipe.d.ts" comme calendar.pipe.d.ts , date-format.pipe.d.ts et bien d'autres.

Chacun d'eux contient le nom de la fonction Typescript pour le canal équivalent, par exemple, DateFormatPipe () est la fonction pour amDateFormatPipe .

Pour utiliser DateFormatPipe dans votre projet, importez-le et ajoutez-le à vos fournisseurs globaux dans app.module.ts:

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

Ensuite, dans n'importe quel composant où vous souhaitez utiliser la fonction, importez-le par dessus, injectez dans le constructeur et utilisez:

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

Pour utiliser l'une des fonctions, suivez ce processus. Ce serait bien s'il y avait un moyen d'accéder à toutes les fonctions, mais aucune des solutions ci-dessus ne fonctionnait pour moi.

Si vous êtes d'accord pour ajouter plus de packages tiers, j'ai utilisé la bibliothèque angular2-moment . L'installation a été assez simple et vous devez suivre les dernières instructions sur le fichier README. J'ai également installé des saisies à la suite de cela.

Fonctionné comme un charme pour moi, et à peine ajouté un code pour le faire fonctionner.

Je ne sais pas si c'est toujours un problème pour les gens, cependant ... En utilisant SystemJS et MomentJS comme bibliothèque, cela l'a résolu pour moi

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

Fonctionne très bien à partir de là pour moi.

pour angular2 RC5, cela a fonctionné pour moi ...

premier moment d'installation via npm

npm install moment --save

Importez ensuite le moment dans le composant que vous souhaitez utiliser

import * as moment from 'moment';

enfin configurer le moment dans systemjs.config.js "map" et "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'}
  };

En plus de la réponse de SnareChop, j'ai dû changer le fichier de frappe pour momentjs.

En moment-node.d.tsj'ai remplacé:

export = moment;

avec

export default moment;

Moment.js prend désormais en charge TypeScript dans la version 2.14.1.

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

Ma propre version de l'utilisation de 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);    

}

Importez d'abord le moment as _moment, puis déclarez la momentvariable de type _moment.Momentavec une valeur initiale de _moment().

L'importation simple de moment ne vous donnera pas de complétion automatique, mais si vous déclarez moment avec l' Momentinterface de type depuis l' _momentespace de noms du 'moment'package initialisé avec l'espace de noms de moment invoqué _moment()vous donne la complétion automatique des api de moment.

Je pense que c'est la façon la plus angulaire d'utiliser moment sans utiliser @types typingsou les fournisseurs angulaires, si vous cherchez la saisie automatique pour les bibliothèques javascript vanille comme moment.

Essayez d'ajouter "allowSyntheticDefaultImports": trueà votre fichier tsconfig.json.

Que fait le drapeau?

Cela indique essentiellement au compilateur TypeScript qu'il est correct d'utiliser une instruction d'importation ES6, c'est-à-dire

import * as moment from 'moment/moment';

sur un module CommonJS comme Moment.js qui ne déclare pas d'export par défaut. L'indicateur affecte uniquement la vérification de type, pas le code généré.

Il est nécessaire si vous utilisez SystemJS comme chargeur de module. L'indicateur sera automatiquement activé si vous dites à votre compilateur TS que vous utilisez SystemJS:

"module": "system"

Cela supprimera également toutes les erreurs générées par les IDE s'ils sont configurés pour utiliser le tsconfig.json.

pour angular2 avec systemjs et jspm devait faire:

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

Pour les utilisateurs de la CLI ANGULAIRE

L'utilisation de bibliothèques externes se trouve dans la documentation ici:

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

Installez simplement votre bibliothèque via

npm install lib-name --save

et l'importer dans votre code. Si la bibliothèque n'inclut pas de typages, vous pouvez les installer en utilisant:

npm install lib-name --save

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

Ouvrez ensuite src / tsconfig.app.json et ajoutez-le au tableau des types:

"types": ["nom-lib"]

Si la bibliothèque pour laquelle vous avez ajouté des saisies doit uniquement être utilisée pour vos tests e2e, utilisez plutôt e2e / tsconfig.e2e.json. Il en va de même pour les tests unitaires et src / tsconfig.spec.json.

Si la bibliothèque n'a pas de saisies disponibles dans @ types /, vous pouvez toujours l'utiliser en lui ajoutant manuellement des saisies:

Créez d'abord un fichier typings.d.ts dans votre dossier src /.

Ce fichier sera automatiquement inclus en tant que définition de type globale. Ensuite, dans src / typings.d.ts, ajoutez le code suivant:

déclarer le module «paquet sans type»;

Enfin, dans le composant ou fichier qui utilise la bibliothèque, ajoutez le code suivant:

import * comme typelessPackage de 'typeless-package'; typelessPackage.method ();

Terminé. Remarque: vous pourriez avoir besoin ou trouver utile de définir plus de typages pour la bibliothèque que vous essayez d'utiliser.

J'ai suivi les conseils pour autoriser allowSyntheticDefaultImports (car il n'y a pas d'export du moment à utiliser pour moi), en utilisant System. Ensuite, j'ai suivi les conseils de quelqu'un à utiliser:

import moment from 'moment';

Le moment étant mappé dans ma configuration system.js. Les autres déclarations d'importation ne fonctionneraient pas pour moi, pour une raison quelconque

Ce qui suit a fonctionné pour moi:

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

Le nœud moment n'existe pas dans le référentiel de typages. Vous devez rediriger vers Definitely Typed afin de le faire fonctionner en utilisant le préfixe dt.

Avec systemjs, ce que j'ai fait, dans mon systemjs.config, j'ai ajouté une carte pour moment

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

Et puis vous pouvez facilement importer momentsimplement en faisant

import * as moment from 'moment'

Je sais que c'est un vieux fil, mais pour moi, la solution la plus simple qui a réellement fonctionné était:

1. L'installer d'abord npm install moment --save
2. Dans mes composants l'exigeant de node_modules et l'utilisant:

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

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