web-dev-qa-db-fra.com

Comment inclure l'instant-timezone dans Angular 2 App

Je me rends compte, cette question est répétée mais une fois précédente ne fournit pas la réponse apt Moment paquet a déjà été installé

1. Paquet installé
 

npm installe moment-timezone --save

Dans node_modules directory

| --moment
| --moment-timezone

répertoires présents

2. Index.html script inclus

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

System.config.js 

  var map = {
    'moment':             'node_modules/moment',
    'momentzone':         'node_modules/moment-timezone'
  };
  var packages = {
    'moment':             { defaultExtension: 'js' },
    'momentzone':         { defaultExtension: 'js' }
  };

Fichier 3.Inside composant.ts 

import * as moment from 'moment/moment';

export class TimeComponent implements OnInit{
   ngOninit(){
         console.log(moment("2014-06-01T12:00:00Z").tz('America/Los_Angeles').format('ha z'));

   }
}

Ce qui doit être importé pour éviter les erreurs La propriété tz n'existe pas sur le type 'Moment'

node.jsangularangular2-directivesangular-moment
10
Sandeep Chikhale

Cela pourrait aider.

Exécuter la commande suivante pour l'installation angular-cli ou npm.

Sudo npm installe moment moment-timezone --save  
npm installer @ types/moment @ types/moment-fuseau horaire --save-dev  

pour npm systemjs.config.js

   map: {
        'moment': 'npm:moment',
        'moment-timezone': 'npm:moment-timezone/builds'
      }
packages: { 
      'moment': {
          main: './moment.js',
          defaultExtension: 'js'
       },
      'moment-timezone': {
        main: './moment-timezone-with-data-2010-2020.min.js',
        defaultExtension: 'js'
      }
}

où que vous vouliez utiliser le fuseau horaire dans le fichier .ts

import * as moment from 'moment-timezone';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})

export class AppComponent {    
  name = 'Angular';
  jun = moment();// creating obj.
  constructor() {
    this.jun.tz('America/Los_Angeles').format('hh : mm : ss a z');
    console.log(this.jun.tz('America/Los_Angeles').format('hh : mm : ss a z'));
    console.log(moment.tz.names()); // for all time zone.
  }
14
vishvas chauhan

Mise à jour pour Angular 4

Installez moment-timezone sur votre ligne de commande:

npm i -S moment-timezone

Importez moment-timezone dans votre composant:

import * as moment from 'moment-timezone';

Utilisez-le selon la documentation:

this.time = moment().tz('America/New_York').format('HH:mm:ss z')

16h20:42 EDT

docs

docs moment

Momentone docs

remarque: moment n'a pas été installé ou importé intentionnellement car il s'agit d'une dépendance de moment-timezone.

15
Matt

Pour installer moment-timezone pour Angular en 2018:

  1. Installez moment.js et moment-timezone

    npm install moment moment-timezone @types/moment-timezone --save

  2. Importez ces modules dans votre fichier .ts

    import * as moment from 'moment'; import 'moment-timezone';

Problème Github: Comment résoudre l'erreur de construction 'tz'.

1
vulp

Cette erreur indique que le compilateur TypeScript ne peut pas trouver la méthode .tz(...) dans les définitions de type de moment (typings).

Tout ce que vous avez à faire est d'installer les saisies de moment-timezone, de sorte qu'il ajoute tz à moment().

(Vous installez généralement des typages pour chaque bibliothèque que vous allez utiliser. Le fait est que certains, comme angular et moment, ont leurs fichiers de définition de type incorporés dans les sources des bibliothèques elles-mêmes, vous libérant ainsi de la nécessité d’installer leurs typings.)

Donc, comme dit, installez simplement les typages de moment-timezone:

# if you have typings version 1.X.X
typings install moment-timezone --save --global

# if you have typings version 0.X.X
typings install moment-timezone --save --ambient

Et tout devrait fonctionner ... si vous faites une chose de plus:

Renommez vos configurations de momentzone à moment-timezone (et ajoutez les fichiers .js):

var map = {
    'moment':                  'node_modules/moment/moment.js',
    'moment-timezone':         'node_modules/moment-timezone/moment-timezone.js'
};
var packages = {
    'moment':                  { defaultExtension: 'js' },
    'moment-timezone':         { defaultExtension: 'js' }
};

Cela est nécessaire car le nom que vous utilisez ici est le nom que vous allez utiliser dans la variable import. Et le nom que vous utilisez dans import est le nom que le compilateur TypeScript utilisera pour rechercher les définitions de type. Et les types que vous avez installés définissent un module appelé moment-timezone, pas momentzone.

Après cela, utilisez:

import * as moment from 'moment';
import 'moment-timezone'; // since this module only has side-effects, this is enough

Cela devrait être tout.


PS: Dans les paramètres ci-dessus, votre compilateur choisira les typages moment à partir des typages moment source AND moment-timezone (fonction tz) dans le référentiel DefinitelyTyped (typings.json).

Parfois, cependant, ils ne jouent pas à Nice. Si cela vous arrive, vous devrez remplacer les typages de moment à partir de la source par ceux de moment à partir du référentiel DefinitelyTyped (typings.json).

En d'autres termes:

# Only do this if installing moment-timezone alone didn't work...

# if you have typings version 1.X.X
typings install moment moment-timezone --save --global

# if you have typings version 0.X.X
typings install moment moment-timezone --save --ambient
0
acdcjunior

Je rencontrais le même problème et faisais tout ce que proposait acdcjunior, mais je devais aussi installer les typings pour moment-node:

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

Après cela, cela a fonctionné comme un charme.

0
Josh Garwood