javascript - How to use moment-timezone in Angular2 via SystemJs - Stack Overflow

admin管理员组

文章数量:1310081

I'm using Angular2 via angular2-seed (which uses SystemJS) and trying to load moment-timezone and use moment.tz.guess() specifically.

I import via:

import * as moment from 'moment-timezone';

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

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

anuglar2-seed uses defaultJSExtensions which I think is why the incorrect .js is being added, so I figured I could just turn this off for moment-timezone in tools/config/project.config.ts like so:

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 is not working. What am I doing wrong?

I'm using Angular2 via angular2-seed (which uses SystemJS) and trying to load moment-timezone and use moment.tz.guess() specifically.

I import via:

import * as moment from 'moment-timezone';

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

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

anuglar2-seed uses defaultJSExtensions which I think is why the incorrect .js is being added, so I figured I could just turn this off for moment-timezone in tools/config/project.config.ts like so:

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 is not working. What am I doing wrong?

• javascript
• angular
• momentjs
• systemjs

Share Improve this question Follow edited Oct 4, 2016 at 13:58 rynop asked Oct 4, 2016 at 4:48 rynoprynop 53.7k2727 gold badges106106 silver badges117117 bronze badges 2

• my environment is using webpack, but I tried import * as mt from 'moment-timezone'; also which didn't work. I then tried import from 'moment-timezone'; and that worked for me. I also have moment installed too. Hope that works for you. – Caleb Commented Oct 4, 2016 at 7:50
• @Caleb When you say didn't work was it adding the incorrect .js extension to the .json file? Doing import from 'moment-timezone'; still adds the .js to the end. I'm confident this is a SystemJS configuration issue – rynop Commented Oct 4, 2016 at 13:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

The problem is, unless you tell SystemJS that you want to use the moment-timezone-with-data-2010-2020.min.js file it will by default load moment/index.js which does a require of the tz data.

Here are the steps to configure and use correctly:

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

In my ponent I do import * as moment from 'moment-timezone';.

You configure SystemJS like:

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

You can then 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;
  }

本文标签： javascriptHow to use momenttimezone in Angular2 via SystemJsStack Overflow