Comment utiliser la bibliothèque moment.js dans angular 2 TypeScript app?
J'ai essayé de l'utiliser avec des liaisons TypeScript:
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 de ligne de commande/importation qui fonctionnerait?
Mise à jour avril 2017:
À partir de la version 2.13.0, Moment inclut un fichier de définition TypeScript. 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';
Ça y est, vous obtenez un support complet de TypeScript!
Bonus édition: Pour saisir une variable ou une propriété sous la forme Moment dans TypeScript, vous pouvez le faire, par exemple:
let myMoment: moment.Moment = moment("someDate");
moment est une ressource globale tierce partie. L'objet moment vit sur window dans le navigateur. Par conséquent, il n’est pas correct de import dans votre application angular2. Au lieu de cela, incluez la balise <script> dans votre code 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 tout seul.
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');
}
Veillez simplement à ajouter la balise de script dans votre code HTML ou votre moment n'existera pas.
<script src="node_modules/moment/moment.js" />
Chargement du module moment
Vous devez d’abord installer un chargeur de module tel que System.js pour charger les fichiers moment commonjs.
System.config({
...
packages: {
moment: {
map: 'node_modules/moment/moment.js',
type: 'cjs',
defaultExtension: 'js'
}
}
});
Puis pour importer le moment dans le fichier où nécessaire
import * as moment from 'moment';
ou
import moment = require('moment');
MODIFIER:
Il existe également des options avec certains bundles tels que Webpack ou SystemJS Builder ou Browserify qui permettent de conserver le moment présent en dehors de l’objet window. Pour plus d'informations à ce sujet, veuillez consulter leurs sites Web respectifs.
Ce qui suit a fonctionné pour moi.
Commencez par installer les définitions de type pour moment.
typings install moment --save
(Remarque: NOT --ambient)
Ensuite, pour contourner l’absence d’une exportation adéquate:
import * as moment from 'moment';
Je voudrais aller avec ce qui suit:
npm install moment --save
Dans le tableau map de votre fichier systemjs.config.js, ajoutez:
'moment': 'node_modules/moment'
to packages array add:
'moment': { defaultExtension: 'js' }
Dans votre composant, utilisez: import * as moment from 'moment/moment';
et c'est tout. Vous pouvez utiliser à partir de la classe de votre composant:
today: string = moment().format('D MMM YYYY');
Nous utilisons des modules maintenant,
essayez import {MomentModule} from 'angular2-moment/moment.module';
après npm install angular2-moment
Pour l'utiliser dans un projet TypeScript, vous devez installer moment:
npm install moment --save
Après l’installation, vous pouvez l’utiliser dans n’importe quel fichier .ts après l’avoir importé:
import * as moment from "moment";
--- Mise à jour du 11/01/2017
Typings est maintenant obsolète et il a été remplacé par npm @types. À partir de maintenant, obtenir des déclarations de type ne nécessitera plus d'outils autres que npm. Pour utiliser Moment, vous n'avez pas besoin d'installer les définitions de type avec @ types car Moment fournit déjà ses propres définitions de type.
Donc, cela 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 être fait en seulement 3 étapes:
1 - Définition du moment d’installation - *. D.ts fichier:
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');
avec ng CLI
> npm install moment --save
dans app.module
import * as moment from 'moment';
providers: [{ provide: 'moment', useValue: moment }]
en composant
constructor(@Inject('moment') private moment)
de cette façon, vous importez un moment une fois
UPDATE Angular => 5
{
provide: 'moment', useFactory: (): any => moment
}
Pour moi travaille en prod avec aot et aussi avec universel
Je n'aime pas utiliser mais utiliser moment.Moment je me suis
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 tuyaux 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 composants (.ts). Commencez par installer la bibliothèque en suivant les instructions:
npm install --save angular2-moment
Dans node_modules/angular2-moment, il y aura désormais des fichiers ".pipe.d.ts" tels que calendar.pipe.d.ts , date-format.pipe.d.ts et beaucoup d’autres.
Chacune de celles-ci contient le nom de la fonction TypeScript du canal équivalent. Par exemple, DateFormatPipe () est la fonction utilisée 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 tout composant pour lequel vous souhaitez utiliser la fonction, importez-le par dessus, injectez-le 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.
Pour angulaire 7+ (supporte également 8):
1: Installez le moment avec la 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 component ou de tout autre fichier comme celui-ci: import * as moment from 'moment';
4: Vous pouvez maintenant utiliser moment n'importe où dans votre code. Juste comme:
myDate = moment(someDate).format('MM/DD/YYYY HH:mm');
pour angular2 RC5 cela a fonctionné pour moi ...
premier moment d'installation via npm
npm install moment --save
Puis importez le moment dans le composant que vous voulez 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'}
};
Si vous êtes prêt à ajouter d'autres packages tiers, j'ai utilisé la bibliothèque angular2-moment . L'installation a été simple et vous devez suivre les dernières instructions du fichier README. J'ai également installé typings à la suite de cela.
Travaillé comme un charme pour moi, et à peine ajouté de code pour le faire fonctionner.
Je ne sais pas si cela reste un problème pour les gens, cependant ... Utiliser SystemJS et MomentJS comme bibliothèque a résolu le problème 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 bien à partir de là pour moi.
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);
}
Commencez par importer le moment en tant que _moment, puis déclarez la variable moment de type _moment.Moment avec une valeur initiale de _moment().
Une importation simple de moment ne vous donnera aucune complétion automatique, mais si vous déclarez un moment avec le type Moment interface de _moment espace de nom à partir de 'moment' paquet initialisé avec l'instant de nom invoqué _moment() vous donne achèvement automatique des api du moment.
Je pense que c'est la manière la plus angular d'utiliser le moment sans utiliser @typestypings ou angular fournisseurs, si vous recherchez la complétion automatique pour les bibliothèques JavaScript de Vanilla. comme moment.
En plus de la réponse de SnareChop, je devais changer le fichier de typage pour momentjs.
Dans moment-node.d.ts j'ai remplacé:
export = moment;
avec
export default moment;
Moment.js prend désormais en charge TypeScript dans v2.14.1.
Essayez d’ajouter "allowSyntheticDefaultImports": true à votre tsconfig.json.
Que fait le drapeau?
Cela indique en gros au compilateur TypeScript qu'il est correct d'utiliser une instruction d'importation ES6, i. e.
import * as moment from 'moment/moment';
sur un module CommonJS comme Moment.js qui ne déclare pas une exportation par défaut. L'indicateur n'affecte que la vérification de type, pas le code généré.
Cela est nécessaire si vous utilisez SystemJS comme chargeur de module. Le drapeau sera automatiquement activé si vous dites à votre compilateur TS que vous utilisez SystemJS:
"module": "system"
Cela supprimera également les erreurs générées par les IDE s’ils sont configurés pour utiliser le tsconfig.json.
Pour ANGULAR Utilisateurs CLI
Utilisation de bibliothèques externes est 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 ne comprend pas de frappe, vous pouvez les installer à l'aide de:
npm install lib-name --save
npm install @ types/lib-name --save-dev
Ensuite, ouvrez src/tsconfig.app.json et ajoutez-le au tableau de types:
"types": ["lib-name"]
Si la bibliothèque pour laquelle vous avez ajouté des typages ne doit être utilisée que dans 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 typages disponibles à @ types /, vous pouvez toujours l'utiliser en ajoutant manuellement des typages:
Commencez par créer un fichier typings.d.ts dans votre dossier src /.
Ce fichier sera automatiquement inclus en tant que définition de type global. Ensuite, dans src/typings.d.ts, ajoutez le code suivant:
déclarer le module 'typeless-package';
Enfin, dans le composant ou le fichier qui utilise la bibliothèque, ajoutez le code suivant:
importer * comme typelessPackage de 'typeless-package'; typelessPackage.method ();
Terminé. Remarque: vous pouvez avoir besoin ou trouver utile de définir plus de typages pour la bibliothèque que vous essayez d'utiliser.
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();
Avec systemjs, ce que j’ai fait est que, dans mon fichier systemjs.config, j’ai ajouté une carte pour moment
map: {
.....,
'moment': 'node_modules/moment/moment.js',
.....
}
Et puis vous pouvez facilement importer moment simplement 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:
- Installation préalable
npm install moment --save - Dans mes composants le nécessitant de node_modules et l'utiliser:
const moment = require('../../../node_modules/moment/moment.js');
@Component({...})
export class MyComponent {
...
ngOnInit() {
this.now = moment().format();
}
...
}
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 pour que cela fonctionne avec le préfixe dt.
J'ai suivi le conseil d'autoriser allowSyntheticDefaultImports (puisqu'il n'y a aucune exportation à utiliser pour moi), en utilisant System. Ensuite, j'ai suivi le conseil de quelqu'un d'utiliser:
import moment from 'moment';
Au moment où mappé dans ma config system.js. Les autres instructions d'importation ne fonctionneraient pas pour moi, pour une raison quelconque