angular - 如何在Angular中异步加载momentjs时区数据
问题描述
我刚刚安装了这个包:
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); }); } }
解决方案
好吧,为了不将评论转换为论坛,让我们总结一下。
您可以从官方网站下载 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';
我更新了这个例子。
推荐阅读
- amazon-web-services - Kubernetes 禁止:用户“system:anonymous”无法获取路径“/”
- python - 无法用folium绘制地图
- python - import pyttsx3 as engine 和 engine = pyttsx3.init() 有什么区别?
- c# - C# 使用静态方法并传入数据库读取器
- asp.net-core - 在 C# 中使用 Microsoft Graph api 如何使用 azure Ad 身份验证在我的应用程序中获取当前登录用户(活动会话)的列表
- c - 指针设置为 NULL 但不在调试器中
- python - 如何使用 tkinter 实现监听器?
- flutter - Flutter Listview.Separated 在列表的开头和结尾添加分隔符
- sql - 在多个不相关表中的多个字段之间应用 COALESCE
- javascript - 如何将 postgres 查询分配给 node.js、Discord bot 和 postgres 集成中的变量?