Как асинхронно загружать данные часовых поясов momentjs в Angular

Я только что установил пакет:

npm install moment-timezone --save

И в угловом компоненте я использую его так:

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

Я предполагаю, что это добавляет все данные часового пояса (900+ КБ) в пакет поставщиков и замедляет запуск приложения.

Как загрузить его асинхронно, только по запросу?

Я бы очень хотел использовать решение NPM, чтобы база данных обновлялась автоматически при обновлении пакетов npm. Никто никогда не забудет обновить базу данных часовых поясов вручную.

Редактировать:

Ответ @Dimanoid показывает, как импортировать момент времени из npm без данных:

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

И вот как вы можете включить данные в качестве лениво загруженного актива:

  1. Измените angular.json -> проекты -> ваши проекты -> архитектор -> сборка -> параметры:

    "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);
      });
  }
}

npm angular ecmascript-6 momentjs moment-timezone
person Liero    schedule 10.05.2019    source источник
comment
Загрузите пакет часовых поясов, когда вам это нужно, и вызовите moment.tz.load(). momentjs.com/timezone/docs/#/data -loading/loading-a-data-bundle PS. Но я думаю, что перенести ваш компонент с moment-tz в отдельный модуль и использовать ленивую загрузку будет проще и эффективнее...   -  person Dimanoid    schedule 10.05.2019
comment
но во-первых, как я могу ссылаться на момент-часовой пояс без данных в угловом проекте?   -  person Liero    schedule 10.05.2019
comment
Как и любая другая библиотека js. Скачать, импортировать, использовать. stackoverflow.com/questions/44945766 /   -  person Dimanoid    schedule 11.05.2019
comment
так что пакет npm не поддерживает ленивую загрузку пакета данных?   -  person Liero    schedule 11.05.2019

Ответы (1)


arrow_upward
2
arrow_downward

Ну ладно, чтобы не конвертировать комментарии в форум, подытожим все это.

Вы можете загрузить библиотеку с официального сайта, поместить ее куда-нибудь в дерево кода, импортировать, затем загрузить 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'));

Таким образом, вы можете установить пакет и загрузить библиотеку без данных, я думаю.

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

Я обновил пример.

person Dimanoid    schedule 11.05.2019
comment
Я поддержу это, но проблема с этим решением заключается в том, что таким образом база данных никогда не будет обновляться в реальном мире. Люди обновляют пакеты npm, но никто никогда не вспомнит об обновлении ресурсов, загруженных вручную. - person Liero; 13.05.2019
comment
Я взглянул на исходники, и на самом деле в пакете npm библиотека и данные разделены. Я обновил ответ. - person Dimanoid; 13.05.2019