Question

我刚刚安装了软件包：

npm install moment-timezone --save

在角度组件中，我像这样使用它：

import * as moment from 'moment-timezone';
moment().tz('America/New York');

我想这会将所有时区数据（900 + kB）添加到供应商捆绑包中，并减慢了应用程序的启动速度。

如何仅按需异步加载它？

我真的很想使用NPM解决方案，以便在更新npm软件包时自动更新数据库。没有人会记得手动更新时区数据库。

编辑：

@Dimanoid的答案显示了如何从npm导入不带数据的矩时区：

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

这是将数据作为延迟加载的资产包括在内的方法：

修改angular.json->项目-> yourprojects->建筑师->构建->选项：

"assets": [
    "src/favicon.ico",
    "src/assets/i18n",
    {   //add this
        "glob": "latest.json",
        "input": "node_modules/moment-timezone/data/packed",
        "output": "assets/moment-timezone"
    }
]

根据需要从资产文件夹中请求它：

import * as moment from 'moment-timezone/moment-timezone';
import { PlatformLocation } from '@angular/common';

export class MyComponent implements OnInit {

  constructor(private platformLocation: PlatformLocation) {
  }
  ngOnInit(){
     //you can use @angular/http instead of fetch
     fetch(this.platformLocation.getBaseHrefFromDOM() +  'assets/moment-timezone/latest.json')
      .then(time => time.json())
      .then(timeZoneData => {
        moment.tz.load(timeZoneData);
      });
  }
}

Answer 1

好吧，不要将评论转换为论坛，让我们总结一下。

您可以从官方站点下载该lib，将其放置在代码树中的某个位置，导入它，然后从后端加载tz-bundle，然后调用moment.tz.load()初始化moment-timezon，然后使用它。

import 'moment';
import * as moment from '../../assets/moment-timezone-nodata';

ngOnInit() {
    this.loadTzBundle().subscribe(data => {
        moment.tz.load(data);
    });
}

为了说明这一点，我举了一个最小的工作示例：https://stackblitz.com/edit/moment-tz-data-loading

修改

我看了一下源代码，实际上npm软件包将lib和数据分开了。导入默认值时，它只会加载数据。

var moment = module.exports = require("./moment-timezone");
moment.tz.load(require('./data/packed/latest.json'));

因此，您可以安装该软件包并在没有数据的情况下加载lib。

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

我更新了示例。

如何在Angular中异步加载moment.js时区数据

编辑：

1 个答案: