Как асинхронно загружать данные часовых поясов момента времени в Angular - PullRequest
Новая
       41

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

3 голосов
/ 10 мая 2019

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

npm install moment-timezone --save

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

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

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

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

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

Edit:

@ Ответ Диманоида показывает, как импортировать момент-часовой пояс из 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);
      });
  }
}

1 Ответ

1 голос
/ 11 мая 2019

Хорошо, чтобы не преобразовывать комментарии в форум, давайте подведем итоги.

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

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

...