angular - 如何在Angular中异步加载momentjs时区数据

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

以下是如何将数据包含为延迟加载的资产：

1. 修改 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"
       }
   ]
   

2. 从资产文件夹中按需请求：

   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 包将库和数据分开。它只是在您导入默认值时加载数据。

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

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

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

我更新了这个例子。