How to use moment-timezone in Angular2 via SystemJs

Question

I am using Angular2 through angular2-seed (which uses SystemJS) and trying to load moment-time and use moment.tz.guess() in particular.

I import through:

 import * as moment from 'moment-timezone'; 

When I do this, I get the following error in the browser:

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

anuglar2-seed uses defaultJSExtensions , so I think the incorrect .js being added, so I decided that I could just turn it off for moment-timezone in tools/config/project.config.ts as follows:

 this.SYSTEM_BUILDER_CONFIG.packages['moment-timezone'] = { defaultExtension: false //I have also tried: 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' } }; 

However, this does not work. What am I doing wrong?

Answer 1

The problem is that if you don't tell SystemJS that you want to use the moment-timezone-with-data-2010-2020.min.js file, it will load moment/index.js , which requires tz data.

The following are steps to set up and use correctly:

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

In my component, I am doing import * as moment from 'moment-timezone'; .

You will configure SystemJS , for example:

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

Then you can use console.log(moment.tz.guess());

For angular2-seed, you do this:

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