Comment utiliser moment-timezone dans Angular2 via SystemJs

Question

Je suis en train d'utiliser Angular2 via angular2-seed (qui utilise SystemJS) et j'essaie de charger moment-timezone et d'utiliser moment.tz.guess() spécifiquement.

J'importe via :

import * as moment from 'moment-timezone';

Lorsque je fais ça, j'obtiens l'erreur suivante dans mon navigateur :

GET /node_modules/moment-timezone/data/packed/latest.json.js 404 (Not Found)

angular2-seed utilise defaultJSExtensions, ce qui est pourquoi je pense que le .js incorrect est ajouté, donc j'ai pensé que je pourrais simplement désactiver cela pour moment-timezone dans tools/config/project.config.ts de cette manière :

this.SYSTEM_BUILDER_CONFIG.packages['moment-timezone'] = {
  defaultExtension: false

//J'ai également essayé :
      map: {
        '/node_modules/moment-timezone/data/packed/latest.json.js': '/node_modules/moment-timezone/data/packed/latest.json',
        '/node_modules/moment-timezone/data/packed/latest.json': '/node_modules/moment-timezone/data/packed/latest.json'
      }
};

Cependant, cela ne fonctionne pas. Qu'est-ce que je fais de mal ?

Answer 1

Le problème est que, sauf si vous indiquez à SystemJS que vous voulez utiliser le fichier moment-timezone-with-data-2010-2020.min.js, il chargera par défaut moment/index.js, qui nécessite les données tz.

Voici les étapes pour configurer et utiliser correctement :

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

Dans mon composant, j'importe import * as moment from 'moment-timezone';.

Vous configurez SystemJS comme suit :

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

Vous pouvez ensuite utiliser console.log(moment.tz.guess());

Pour angular2-seed, vous faites ceci :

project.config.ts:

...
 constructor() {

    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      {src: 'moment', inject: 'libs'},
      {src: 'moment-timezone/builds/moment-timezone-with-data-2010-2020.min.js', inject: 'libs'},
    ];

...
    const mtzc = {
      main: 'builds/moment-timezone-with-data-2010-2020.min.js',
      defaultExtension: 'js'
    };

    this.SYSTEM_BUILDER_CONFIG.packages['moment-timezone'] = mtzc;
    this.SYSTEM_CONFIG_DEV.packages['moment-timezone'] = mtzc;
  }