web-dev-qa-db-fra.com

Utilisation de moment.js dans Angular 2 application TypeScript

Je ne parviens pas à utiliser la bibliothèque moment.js dans une application Angular 2 TypeScript. Même après avoir lu la réponse à cette question Je ne peux pas le faire fonctionner.

Voici ce que j'ai fait jusqu'à présent:

  • J'ai installé moment.js à l'aide de npm afin de pouvoir trouver la bibliothèque sous node_modules/moment/moment.js

  • J'ai configuré System.js pour récupérer la bibliothèque moment:

    System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      moment: {
        main: 'moment.js',
        type: 'cjs',
        defaultExtension: 'js'
      }
    },
    map: {
      moment: 'node_modules/moment'
    }
});
  • J'ai installé les typages TypeScript avec typings install moment-node --ambient --save et typings install moment --ambient --save, afin que je puisse voir les typages appropriés dans typings/main/ambient/moment-node et typings/main/ambient/moment

Maintenant, si dans mon code j'utilise import * as moment from 'moment';, la compilation TypeScript fonctionne bien et je peux voir la suggestion correcte dans l'éditeur Atom (si je commence par moment()., je peux voir year (), month (), etc.). Cependant, si je lance mon code dans le navigateur, cela donne une erreur disant que "le moment n'est pas une fonction" (le débogage, je vois que ce moment est un objet avec beaucoup de méthodes).

Si j'écris import moment from 'moment';, le code dans le navigateur fonctionne correctement. Cependant, la compilation TypeScript échoue avec le message "Le module n'a pas d'export par défaut" et je ne peux obtenir aucune suggestion d'Atom lors de l'écriture du code.

Qu'est-ce que je fais mal? Quelle est la bonne façon d'importer moment.js (et toute bibliothèque autre que TypeScript) dans une application Angular 2 TypeScript?

typescriptangularmomentjssystemjs
11
DanyUP
import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;
4
Vladimir Trifonov

Comme indiqué plus bas, les navires avec leur propre typage sont maintenant . Et @ angular/cli ont également changé. Mise à jour ma réponse pour refléter cela.

npm i --save moment

import * as moment from 'moment';

export class SomeClass implements OnInit {

  date: moment.Moment;

  ngOnInit() {
    this.date = moment();
  }

}

est tout ce qui est nécessaire avec @ angular/cli.

Ci-dessous ma vieille réponse obsolète.

Avec angular-cli: vous obtenez donc Intellisense en VsCode

edit -> angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...

      'moment/min/**', // add this line

      ...
    ]
  });
};

edit -> system-config.ts

const map: any = {
  moment: 'vendor/moment/min/moment.min.js' // add this line
};

Dans votre composant:

import * as moment from 'moment';

...
// example of usage
dates: moment.Moment[] = [];

ngOnInit() {
  let date = moment();
  date.add(2, 'days');
  this.dates.Push(date);
}
4
Tony Krøger

J'ai aussi trouvé ceci: Installez Moment.js à l'aide de NPM: 

npm install moment

Ajoutez-le à votre configuration SystemJS: 

map: {
  'angular2': 'node_modules/angular2',
  'rxjs': 'node_modules/rxjs',
  'moment': 'node_modules/moment/moment'
}

Vous avez également besoin de l'interface: tsd install moment --save Puis ajoutez:

/// <reference path="typings/moment/moment.d.ts" />
import * as moment from 'moment';
1
Vladimir Trifonov

De votre index.html add

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

Dans votre composant, utilisez:

declare var moment: any;
...

this.startDate = moment().subtract(15, 'days').format('DD-MM-YYYY');
this.endDate = moment().format('DD-MM-YYYY');
1
Sacky San

Lorsque vous importez un module en utilisant namespace syntax pour regrouper les exportations sur un seul objet, comme dans import * as moment from 'moment', vous n'importez pas l'objet moment réel que le module exporte, mais plutôt tous ses membres. Vous perdez la signature d'appel. Pour résoudre ce problème, dans un projet SystemJS + TypeScript, spécifiez la valeur "system" pour le module ou la valeur true pour allowSyntheticDefaultImports, en les transmettant au compilateur TypeScript, de préférence via un fichier tsconfig.json ., Puis importez le moment de cette manière.

import moment from 'moment';

et tout fonctionnera.

0
Aluan Haddad