Как использовать библиотеку moment.js в угловом 2-х машинописном приложении?
Я попытался использовать его с привязками типов:
npm install moment --save typings install moment --ambient -- save
test.ts:
import {moment} from 'moment/moment';
И без:
- Угловой - общий сервис между компонентами не работает
- Могут ли ленивые модули использовать один и тот же экземпляр службы, предоставляемой их родителями?
- Как получить параметры запроса от url в угловом 2?
- Как установить связь между компонентом в угловом?
- Как обращаться с кодами статуса http, отличными от 200 в Angular 2
npm install moment --save
test.ts:
var moment = require('moment/moment');
Но когда я вызываю moment.format (), я получаю сообщение об ошибке. Должно быть просто, может ли кто-нибудь предоставить комбинацию командной строки / импорта, которая будет работать?
- Как импортировать проекты jQuery в Angular2 TypeScript?
- Angular2: Как загрузить данные перед рендерингом компонента?
- Невозможно связать с 'formGroup', поскольку это не известное свойство 'form'
- Не удается найти внешний модуль «угловой2 / угловой2» - Angular2 w / Typcript
- Как закачать документ в услугу «Угловая 2»
- Расширитель компонентов с декоратором базового classа
- AngularJS выполняет HTTP-запрос OPTIONS для кросс-исходного ресурса
- Как реализовать сайт с сотнями страниц в Angular2
Сейчас мы используем модули,
попробуйте import {MomentModule} from 'angular2-moment/moment.module';
после npm install 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.
В дополнение к ответу 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'
Я знаю, что это старая нить, но для меня самое простое решение, которое на самом деле работало:
- Установка первого
npm install moment --save
- В моих компонентах, требующих его от 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. Другие заявления импорта не будут работать для меня, по какой-то причине