Как использовать библиотеку 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 (), я получаю сообщение об ошибке. Должно быть просто, кто-нибудь может предоставить комбинацию командной строки / импорта, которая будет работать?

Обновление апрель 2017:

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

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

npm install --save moment

И затем в вашем приложении Angular импортировать так просто:

import * as moment from 'moment';

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

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

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

momentявляется сторонним глобальным ресурсом. В данный момент объект живет windowв браузере. Поэтому это не правильно importв вашем приложении angular2. Вместо этого включите<script> включите в ваш html тег, который будет загружать файл moment.js.

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

declare var moment: any;

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

///<reference path="./path/to/moment.d.ts" />

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

пример

import {Component} from 'angular2/core';
declare var moment: any;

@Component({
    selector: 'example',
    template: '<h1>Today is {{today}}</h1>'
})
export class ExampleComponent{
    today: string = moment().format('D MMM YYYY');
}

Просто убедитесь, что добавили тег script в ваш html, или момент не будет существовать.

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

Загрузка модуля 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, которые будут держать момент в стороне от объекта окна. Для получения дополнительной информации об этом, пожалуйста, посетите их соответствующие веб-сайты для обучения.

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

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

typings install moment --save

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

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

import * as moment from 'moment';

Я бы пошел со следующим:

npm install moment --save

К массиву вашего systemjs.config.jsфайла mapдобавьте:

'moment': 'node_modules/moment'

к packagesмассиву добавить:

'moment': { defaultExtension: 'js' }

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

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

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

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

пытаться import {MomentModule} from 'angular2-moment/moment.module';

после npm install angular2-moment

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

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

npm install moment --save

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

import * as moment from "moment";

--- Обновление 01.11.2017

Typings устарела и была заменена на npm @types . Отныне для получения объявлений типов не требуется никаких инструментов, кроме npm. Чтобы использовать Moment, вам не нужно устанавливать определения типов через @types, потому что Moment уже предоставляет свои собственные определения типов.

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

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

npm install moment --save

2 - Добавьте тег script в ваш HTML-файл:

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

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

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

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

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

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

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

2 - Добавьте тег script в ваш HTML-файл:

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

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

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

Для угловых 7+ (поддержка 8 и 9 также) :

1: установить момент по команде npm install moment --save

2: не добавляйте ничего в app.module.ts

3: Просто добавьте оператор импорта в начало вашего componentили любого другого файла, подобного этому:import * as moment from 'moment';

4: Теперь вы можете использовать в momentлюбом месте вашего кода. Как:

myDate = moment(someDate).format('MM/DD/YYYY HH:mm');

с нг CLI

> npm install moment --save

в app.module

import * as moment from 'moment';

providers: [{ provide: 'moment', useValue: moment }]

в компоненте

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

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

ОБНОВЛЕНИЕ Angular => 5

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

У меня работает в прод с аот а также с универсал

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

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

В библиотеке angular2-moment есть каналы типа {{myDate | amTimeAgo}} для использования в файлах .html.

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

npm install --save angular2-moment

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

Каждый из них содержит имя функции Typescript для эквивалентного канала, например, 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');
}

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

Если вы можете добавить дополнительные сторонние пакеты, я использовал библиотеку angular2-moment . Установка была довольно простой, и вы должны следовать последним инструкциям на 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 = (<any>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'}
  };

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

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

export = moment;

с участием

export default moment;

Moment.js теперь поддерживает TypeScript в v2.14.1.

Смотрите: https://github.com/moment/moment/pull/3280.

Моя собственная версия использования Moment в 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().

Простой импорт момента не даст вам никакого автоматического завершения, но если вы объявите момент с типом Momentinterface из _momentпространства имен из 'moment'пакета, инициализированного вызванным пространством имен момента_moment() вы получите автоматическое завершение API моментов.

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

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

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

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

import * as moment from 'moment/moment';

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

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

"module": "system"

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

для angular2 с systemjs и 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 установить lib-имя --save

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

npm установить lib-имя --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 добавьте следующий код:

объявить модуль 'typeless-package';

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

импорт * как typelessPackage из 'typeless-package'; typelessPackage.method ();

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

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

import moment from 'moment';

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

У меня сработало следующее:

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();
   }
   ...
}