Использование moment.js в приложении Angular 2 typescript

Question

Я изо всех сил пытаюсь использовать библиотеку moment.js внутри приложения Angular 2 Typcript. Даже после прочтения ответа на вопрос this question я не могу заставить его работать.

Это то, что я сделал до сих пор:

• Я установил moment.js используя НПМ, так что я могу найти библиотеку под node_modules/момент/moment.js

• Я настроил System.js к получить момент библиотека:

  System.config({ 
      packages: { 
       app: { 
       format: 'register', 
       defaultExtension: 'js' 
       }, 
       moment: { 
       main: 'moment.js', 
       type: 'cjs', 
       defaultExtension: 'js' 
       } 
      }, 
      map: { 
       moment: 'node_modules/moment' 
      } 
  }); 
  

• я установил машинопись типизации с typings install moment-node --ambient --save и typings install moment --ambient --save, так что я могу видеть правильные типизации внутри типизации/основной/окружающей среды/момент-узла и типизации/основной/окружающей среды/мама лор

Теперь, если в моем коде я использую import * as moment from 'moment'; машинопись компиляции работать гладко, и я могу видеть правильное предложение внутри редактора Atom (если я начну с moment(). я могу видеть год(), месяц() и т.д.) , Однако, если я запустил свой код внутри браузера, он дает ошибку, говоря, что «момент не является функцией» (отладка я вижу, что момент - это объект с большим количеством методов).

Если я пишу import moment from 'moment';, код в браузере отлично работает, однако компиляция машинописных текстов не выполняется, поскольку «момент модуля не имеет экспорта по умолчанию», и я не могу получить какое-либо предложение от Atom при написании кода.

Что я делаю неправильно? Каким образом можно импортировать файл moment.js (и любую библиотеку без машинописных шрифтов) внутри приложения с угловым 2-ти машинописным текстом?

Answer 1

import * as moment_ from 'moment'; 
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_; 

Answer 2

Также я нашел это: Установите Moment.js с помощью NPM:

npm install moment 

Добавьте его в конфигурации SystemJS:

map: { 
    'angular2': 'node_modules/angular2', 
    'rxjs': 'node_modules/rxjs', 
    'moment': 'node_modules/moment/moment' 
} 

Вы также должны интерфейс: tsd install moment --save и затем добавить:

/// <reference path="typings/moment/moment.d.ts" /> 
import * as moment from 'moment'; 

Answer 3

При импорте модуля с помощью Namespace синтаксиса для сбора экспорта на один объект, как в import * as moment from 'moment', вы не импортируя фактически момент объекта, который экспортирует модуль, а вся ее членов. Вы теряете подпись вызова. Чтобы решить эту проблему, в проекте SystemJS + TypeScript укажите либо значение «system» для модуля, либо значение true для allowSyntheticDefaultImports, передав их компилятору TypeScript, предпочтительно используя файл tsconfig.json. Затем импортируйте момент, как так

import moment from 'moment'; 

и все будет работать.

Answer 4

Как уже отмечалось, корабли с более ранними моделями теперь имеют свои собственные тиски. И изменились @ угловые/кли. Обновленный мой ответ, чтобы отразить это.

НОГО я --save момента

import * as moment from 'moment'; 

export class SomeClass implements OnInit { 

    date: moment.Moment; 

    ngOnInit() { 
    this.date = moment(); 
    } 

} 

это все, что нужно с @ угловым/кли.

Ниже приведен мой старый устаревший ответ.

С угловой кли: Таким образом, вы получаете Intellisense в VsCode

редактировать -> угловые-CLI-build.js

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     ... 

     'moment/min/**', // add this line 

     ... 
    ] 
    }); 
}; 

редактировать -> Система-config.ts

const map: any = { 
    moment: 'vendor/moment/min/moment.min.js' // add this line 
}; 

В компоненте:

import * as moment from 'moment'; 

... 
// example of usage 
dates: moment.Moment[] = []; 

ngOnInit() { 
    let date = moment(); 
    date.add(2, 'days'); 
    this.dates.push(date); 
} 

Answer 5

Вашего index.html добавить

<script src="../node_modules/moment/moment.js"></script> 

В вашем использовании компонента:

declare var moment: any; 
... 

this.startDate = moment().subtract(15, 'days').format('DD-MM-YYYY'); 
this.endDate = moment().format('DD-MM-YYYY');