如何通过SystemJs在Angular2中使用moment-timezone

How to use moment-timezone in Angular2 via SystemJs

本文关键字：moment-timezone Angular2 何通过 SystemJs      更新时间：2023-09-26

我通过Angular2 -seed(使用SystemJS)使用Angular2，并试图加载moment-timezone，并专门使用moment.tz.guess()。

我导入via:

import * as moment from 'moment-timezone';

当我这样做时，我在浏览器中得到以下错误:

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

anuglar2-seed使用defaultJSExtensions，我认为这就是为什么添加了不正确的.js，所以我想我可以在tools/config/project.config.ts中关闭moment-timezone，像这样:

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

然而，这不起作用。我做错了什么?

问题是，除非你告诉SystemJS你想使用moment-timezone-with-data-2010-2020.min.js文件，否则它将默认加载moment/index.js，这需要tz数据。

以下是正确配置和使用的步骤:

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

在我的组件，我做import * as moment from 'moment-timezone';。

你这样配置SystemJS:

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

你可以使用console.log(moment.tz.guess());

对于angular2-seed，你这样做:

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;
  }
相关文章：