Как использовать библиотеку moment.js в угловом 2-х машинописном приложении?

Я попытался использовать его с привязками типов:

npm install moment --save typings install moment --ambient -- save 

test.ts:

 import {moment} from 'moment/moment'; 

И без:

 npm install moment --save 

test.ts:

 var moment = require('moment/moment'); 

Но когда я вызываю moment.format (), я получаю сообщение об ошибке. Должно быть просто, может ли кто-нибудь предоставить комбинацию командной строки / импорта, которая будет работать?

Сейчас мы используем модули,

попробуйте import {MomentModule} from 'angular2-moment/moment.module';

после npm install angular2-moment

http://ngmodules.org/modules/angular2-moment

Обновление апреля 2017 года:

Начиная с версии 2.13.0, Moment включает файл описания типов. https://momentjs.com/docs/#/use-it/typescript/

Просто установите его с помощью npm в вашем консольном типе

 npm install --save moment 

А затем в вашем приложении «Угловое» импорт так же просто:

 import * as moment from 'moment'; 

Вот и все, вы получаете полную поддержку Виджета!

Редактирование бонуса: Чтобы ввести переменную или свойство как Moment в TypScript, вы можете сделать это, например:

 let myMoment: moment.Moment = moment("someDate"); 

moment является сторонним глобальным ресурсом. Объект момента живет в window браузера. Поэтому неверно import его в приложение углового2. Вместо этого добавьте тег в свой html, который загрузит файл moment.js.

Чтобы сделать TypeScript счастливым, вы можете добавить

 declare var moment: any; 

в верхней части ваших файлов, где вы используете его, чтобы остановить ошибки компиляции, или можете использовать

 /// 

или используйте tsd для установки файла moment.d.ts, который TypeScript может найти на своем собственном.

пример

 import {Component} from 'angular2/core'; declare var moment: any; @Component({ selector: 'example', template: '

Today is {{today}}

' }) export class ExampleComponent{ today: string = moment().format('D MMM YYYY'); }

Просто не забудьте добавить тег скрипта в свой html или момент не будет.

  

moment загрузки модуля

Сначала вам нужно настроить загрузчик модуля, такой как System.js, для загрузки моментальных файлов commonjs

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

Затем, чтобы импортировать момент в файл, где необходимо использовать

 import * as moment from 'moment'; 

или

 import moment = require('moment'); 

РЕДАКТИРОВАТЬ:

Существуют также варианты с некоторыми связями, такими как Webpack или SystemJS builder или Browserify, которые будут сохранять момент объекта windows. Для получения дополнительной информации об этом, пожалуйста, посетите соответствующие веб-сайты для получения инструкций.

Следующие работали для меня.

Сначала установите определения типов для момента.

typings install moment --save

(Примечание: НЕ – --ambient )

Затем, чтобы обойти отсутствие надлежащего экспорта:

 import * as moment from 'moment'; 

Я бы сказал следующее:

npm install moment --save

К вашему systemjs.config.js map systemjs.config.js добавьте:

'moment': 'node_modules/moment'

к массиву packages add:

'moment': { defaultExtension: 'js' }

В вашем component.ts используйте: import * as moment from 'moment/moment';

вот и все. Вы можете использовать его из classа компонента:

today: string = moment().format('D MMM YYYY');

Чтобы использовать его в проекте Typescript вам нужно установить момент:

npm install moment --save

После установки момента его можно использовать в любом файле .ts после его импорта:

import * as moment from "moment";

— Обновление 11/01/2017

Типизация теперь устарела, и она была заменена на npm @types . С этого момента получение объявлений типа не потребует инструментов, кроме npm. Чтобы использовать Moment, вам не нужно устанавливать определения типов через @types, поскольку Moment уже предоставляет свои собственные определения типов.

Таким образом, он сводится к 3 шагам:

1 – Установить момент, который включает определения типов:

 npm install moment --save 

2 – Добавьте тег сценария в свой HTML-файл:

  

3 - Теперь вы можете просто использовать его. Период.

 today: string = moment().format('D MMM YYYY'); 

--- Оригинальный ответ

Это можно сделать всего за 3 шага:

1 - Определение момента установки - * .d.ts файл:

 typings install --save --global dt~moment dt~moment-node 

2 - Добавьте тег сценария в свой HTML-файл:

  

3 - Теперь вы можете просто использовать его. Период.

 today: string = moment().format('D MMM YYYY'); 

В библиотеке с угловым 2-моментом есть такие трубы, как {{myDate | amTimeAgo}} для использования в файлах .html.

Те же самые каналы также могут быть доступны как функции Typcript в файле компонента (.ts). Сначала установите библиотеку в соответствии с инструкциями:

 npm install --save angular2-moment 

В node_modules / angular2-moment теперь будут файлы .pipe.d.ts, такие как calendar.pipe.d.ts , date-format.pipe.d.ts и многие другие.

Каждый из них содержит имя функции Typcript для эквивалентного канала, например DateFormatPipe () – это функция для amDateFormatPipe .

Чтобы использовать DateFormatPipe в своем проекте, импортируйте и добавьте его своим глобальным провайдерам в app.module.ts:

 import { DateFormatPipe } from "angular2-moment"; ..... providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, ...., DateFormatPipe] 

Затем в любом компоненте, где вы хотите использовать эту функцию, импортируйте ее сверху, вставьте в конструктор и используйте:

 import { DateFormatPipe } from "angular2-moment"; .... constructor(......., public dfp: DateFormatPipe) { let raw = new Date(2015, 1, 12); this.formattedDate = dfp.transform(raw, 'D MMM YYYY'); } 

Чтобы использовать любую из функций, следуйте этому процессу. Было бы неплохо, если бы был один способ получить доступ ко всем функциям, но ни один из вышеперечисленных решений не работал для меня.

с CLI CLI

 > npm install moment --save 

в app.module

 import * as moment from 'moment'; providers: [{ provide: 'moment', useValue: moment }] 

в компоненте

 constructor(@Inject('moment') private moment) 

таким образом вы сразу импортируете момент

ОБНОВЛЕНИЕ Угловое => 5

 { provide: 'moment', useFactory: (): any => moment } 

Для меня работает в prod с aot, а также с универсальным

Я не люблю использовать любой, но используя момент. Момент, который я получил

 Error Typescript Type 'typeof moment' is not assignable to type 'Moment'. Property 'format' is missing in type 'typeof moment'. 

Если вы в порядке добавляете больше сторонних пакетов, я использовал библиотеку с угловым2-моментом . Установка была довольно простой, и вы должны следовать последним инструкциям README. В результате я также установил типизацию .

Работала как прелесть для меня, и едва добавила код, чтобы заставить его работать.

Не уверен, что это все еще проблема для людей, однако … Используя SystemJS и MomentJS в качестве библиотеки, это решило это для меня

 /* * Import Custom Components */ import * as moment from 'moment/moment'; // please use path to moment.js file, extension is set in system.config // under systemjs, moment is actually exported as the default export, so we account for that const momentConstructor: (value?: any) => moment.Moment = (moment).default || moment; 

Прекрасно работает для меня.

для angular2 RC5 это сработало для меня …

первый момент установки через npm

 npm install moment --save 

Затем импортируйте момент в компоненте, который вы хотите использовать.

 import * as moment from 'moment'; 

наконец настроить момент в systemjs.config.js «карта» и «пакеты»

 // map tells the System loader where to look for things var map = { .... 'moment': 'node_modules/moment' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { ... 'moment': { main:'moment', defaultExtension: 'js'} }; 

Moment.js теперь поддерживает TypeScript в версии 2.1.1.

См .: https://github.com/moment/moment/pull/3280

В дополнение к ответу SnareChop мне пришлось изменить файл типизации для momentjs.

В moment-node.d.ts я заменил:

 export = moment; 

с

 export default moment; 

Попробуйте добавить "allowSyntheticDefaultImports": true для вашего tsconfig.json .

Что делает флаг?

Это в основном говорит компилятору TypeScript, что можно использовать инструкцию импорта ES6, т. Е.

 import * as moment from 'moment/moment'; 

на модуле CommonJS, таком как Moment.js, который не объявляет экспорт по умолчанию. Флаг влияет только на проверку типов, а не на сгенерированный код.

Это необходимо, если вы используете SystemJS в качестве загрузчика вашего модуля. Флаг будет автоматически включен, если вы сообщите своему TS-компилятору, что вы используете SystemJS:

 "module": "system" 

Это также приведет к удалению любых ошибок, создаваемых IDE, если они настроены на использование tsconfig.json .

для углового2 с системой js и jspm должен был делать:

 import * as moment_ from 'moment'; export const moment = moment_["default"]; var a = moment.now(); var b = moment().format('dddd'); var c = moment().startOf('day').fromNow(); 

Для пользователей ANGULAR CLI

Использование внешних библиотек содержится в документации:

https://github.com/angular/angular-cli/wiki/stories-third-party-lib

Просто установите свою библиотеку через

npm install lib-name –save

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

npm install lib-name –save

npm install @ types / lib-name –save-dev

Затем откройте src / tsconfig.app.json и добавьте его в массив типов:

“types”: [“lib-name”]

Если библиотека, которую вы добавили, используется только для тестов e2e, используйте e2e / tsconfig.e2e.json. То же самое касается модульных тестов и src / tsconfig.spec.json.

Если в библиотеке нет типов, доступных в @ types /, вы все равно можете использовать ее, добавив для нее типизацию:

Сначала создайте файл typings.d.ts в папке src /.

Этот файл будет автоматически включен как определение глобального типа. Затем в src / typings.d.ts добавьте следующий код:

объявить модуль «noeless-package»;

Наконец, в компоненте или файле, который использует библиотеку, добавьте следующий код:

import * as typelessPackage from ‘typeless-package’; typelessPackage.method ();

Готово. Примечание. Возможно, вам понадобится или будет полезно определить более типизированную библиотеку, которую вы пытаетесь использовать.

Следующие работали для меня:

 typings install dt~moment-node --save --global 

Момент-узел не существует в репозитории типизирования. Вам нужно перенаправить на «Определенно типизированный», чтобы заставить его работать с помощью префикса dt.

С systemjs, что я сделал, внутри моей systemjs.config я добавил карту на moment

 map: { ....., 'moment': 'node_modules/moment/moment.js', ..... } 

И тогда вы можете легко импортировать moment просто выполняя

 import * as moment from 'moment' 

Я знаю, что это старая нить, но для меня самое простое решение, которое на самом деле работало:

  1. Установка первого npm install moment --save
  2. В моих компонентах, требующих его от node_modules, и используйте его:
 const moment = require('../../../node_modules/moment/moment.js'); @Component({...}) export class MyComponent { ... ngOnInit() { this.now = moment().format(); } ... } 

Моя собственная версия использования Moment in Angular

npm i moment --save

 import * as _moment from 'moment'; ... moment: _moment.Moment = _moment(); constructor() { } ngOnInit() { const unix = this.moment.format('X'); console.log(unix); } 

Первый момент импорта как _moment , затем объявите переменную moment с типом _moment.Moment с начальным значением _moment() .

Обычный импорт момента не даст вам какого-либо автоматического завершения, но если вы объявите момент с типом Moment интерфейса из пространства имен _moment из пакета 'moment' , инициализированного с помощью пространства имен имен, вызываемого _moment() дает вам автоматическое завершение api момента.

Я думаю, что это самый угловатый способ использования момента без использования @types typings или угловых провайдеров, если вы ищете автоматическое завершение для ванильных библиотек javascript, таких как момент.

Я посоветовал разрешить allowSyntheticDefaultImports (так как для меня нет экспорта с момента использования), используя System. Затем я пошел за советом:

 import moment from 'moment'; 

С моментом, отображаемым в моей конфигурации system.js. Другие заявления импорта не будут работать для меня, по какой-то причине

  • Цепочка RxJS Наблюдаемые данные http в Angular2 с использованием TypeScript
  • Угловой HTTP GET с ошибкой TypeScript http.get (...) .map не является функцией в
  • Как обмениваться услугой между двумя модулями - @NgModule в угловом не между компонентами?
  • Angular2 - Взаимодействие между компонентами с использованием сервиса
  • angular2 bootstrap с данными из ajax call (s)
  • Лучший способ импортировать Observable из rxjs
  • Угловая 2 Показать и скрыть элемент
  • Как избежать импорта с очень длинными относительными путями в Angular 2?
  • angular4 httpclient csrf не отправляет x-xsrf-токен
  • Общий валидатор почты в Angular2
  • Каков правильный способ обмена результатами сетевого звонка с угловым Http в RxJs 5?
  • Interesting Posts

    Шаблоны Django: значение словарного ключа с пробелом в нем

    Сортировать по:

    Прокрутка страницы вверх или вниз в Selenium WebDriver (Selenium 2) с использованием java

    Импорт zpool с отсутствующим устройством кэширования

    В чем разница между методом и функцией?

    Создание фильма из серии сюжетов в R

    Статический блок в Java не выполнен

    VS2010 и IE10 Прикрепление отладчика сценария для обработки iexplore.exe не удалось

    Почему этот полиморфный код на C # печатает то, что он делает?

    Существуют ли какие-либо инструменты в linux для разделения файла на месте?

    Каков самый простой способ подключения двух компьютеров?

    Скопируйте список файлов, содержащихся в txt-файле, в другую папку

    Предотвращение Windows от создания новых сетевых имен при подключении с помощью Android

    Неисправность Matrox TH2G Digital на графическом процессоре Intel HD 5500 (обнаруживает сигнал VGA как DisplayPort, обеспечивает низкое разрешение)

    Есть ли ограничение на прикрепленные элементы панели задач?

    Давайте будем гением компьютера.