Я попытался использовать его с привязками typescript:
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 содержит файл определения typescript. 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 для установки файла момента .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');
EDIT:
Существуют также варианты с некоторыми связями, такими как Webpack или SystemJS builder или Browserify, которые сохранят момент объекта окна. Для получения дополнительной информации о них, пожалуйста, посетите их соответствующие веб-сайты для ознакомления.
System
load, в версии момента commonjs для узла, а затем вы сможете ссылаться на него с помощью import * as moment from 'moment';
или import moment = require('moment');
которые для всех намерений и целей идентичны, но имеют некоторые тонкие различия в машинописи.
typings install moment --ambient -- save
наборов typings install moment --ambient -- save
не typings
опускают файл определения и создают ссылку на ///<reference path="./path/to/moment.d.ts" />
? У меня такая же ошибка при запуске npm run tsc
Следующие работали для меня.
Сначала установите определения типов для момента.
typings install moment --save
(Примечание: NOT --ambient
)
Затем, чтобы обойти отсутствие надлежащего экспорта:
import * as moment from 'moment';
import moment from "moment";
вместо этого, чтобы заставить это работать.
import { Moment } from 'moment';
работал на меня.
Я бы сказал следующее:
npm install moment --save
В массив systemjs.config.js
file map
добавьте:
'moment': 'node_modules/moment'
to packages
array add:
'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
Чтобы использовать его в проекте 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 - Добавьте тег 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');
с ng 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
}
Для меня работает в prod с aot а также с универсальным
Мне не нравится использовать любой, но используя момент. Момент Я получил
Error Typescript Type 'typeof moment' is not assignable to type 'Moment'. Property 'format' is missing in type 'typeof moment'.
Parameter 'moment' implicitly has an 'any' type
ошибку Parameter 'moment' implicitly has an 'any' type
.
Библиотека angular2 -moment имеет такие каналы, как {{myDate | amTimeAgo}} для использования в файлах .html.
Те же самые каналы можно также получить в виде Typescript функций в файле класса компонента (.ts). Сначала установите библиотеку в соответствии с инструкциями:
npm install --save angular2-moment
В node_modules/angular2 -момент теперь будут ".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 RC5 это сработало для меня...
первый момент установки через npm
npm install moment --save
Затем импортируйте момент в компоненте, который вы хотите использовать
import * as moment from 'moment';
окончательно настройте момент в systemjs.config.js "map" и "packages"
// 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'}
};
Не уверен, что это все еще проблема для людей, однако... Используя 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-moment. Установка была довольно простой, и вы должны следовать последним инструкциям README. Я также установил typings в результате этого.
Работал как прелесть для меня, и едва добавил код, чтобы заставить его работать.
Moment.js теперь поддерживает TypeScript в v2.14.1.
Попробуйте добавить "allowSyntheticDefaultImports": true
к вашему tsconfig.json
.
Это в основном говорит компилятору TypeScript, что в нем можно использовать инструкцию импорта ES6, т.е. е.
import * as moment from 'moment/moment';
в модуле CommonJS, таком как Moment.js, который не объявляет экспорт по умолчанию. Флаг влияет только на проверку типов, а не на сгенерированный код.
Это необходимо, если вы используете SystemJS в качестве загрузчика вашего модуля. Флаг будет автоматически включен, если вы сообщите своему TS-компилятору, что вы используете SystemJS:
"module": "system"
Это также приведет к удалению любых ошибок, создаваемых IDE, если они настроены на использование tsconfig.json
.
В дополнение к ответу на SnareChop мне пришлось изменить файл типизации для momentjs.
В moment-node.d.ts
я заменил:
export = moment;
с
export default moment;
Для 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 добавьте следующий код:
объявить модуль 'typeless-package';
Наконец, в компоненте или файле, который использует библиотеку, добавьте следующий код:
import * как noelessPackage из 'typeless-package'; typelessPackage.method();
Готово. Примечание: вам может понадобиться или найти полезное для определения большего числа типов для библиотеку, которую вы пытаетесь использовать.
для angular2 с системой 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();
Моя собственная версия использования Moment in Angular
npm я 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, таких как момент.
npm install @types/moment --save
Я знаю, что это старый поток, но для меня самое простое решение, которое на самом деле работало:
npm install moment --save
const moment = require('../../../node_modules/moment/moment.js');
@Component({...})
export class MyComponent {
...
ngOnInit() {
this.now = moment().format();
}
...
}
С systemjs, что я сделал, внутри моей systemjs.config я добавил карту для moment
map: {
.....,
'moment': 'node_modules/moment/moment.js',
.....
}
И тогда вы можете легко импортировать moment
, просто выполняя
import * as moment from 'moment'
Следующие работали для меня:
typings install dt~moment-node --save --global
Момент-node не существует в репозитории типизирования. Вам нужно перенаправить на определенно типизированный, чтобы заставить его работать с помощью префикса dt.
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import * as moment from 'moment';
@Component({
selector: 'app-user-details',
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.scss'],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
// {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],
})
export class UserDetailsComponent implements OnInit {
userDetailsFormGroup = this.fb.group({
firstName: [''],
lastName: [''],
username: [''],
address: ['', Validators.required],
dob: [moment(), Validators.required],
gender: ['', Validators.required],
contactNumber: ['', Validators.required],
});
updateUserProfile() {
const dobDate = this.userDetailsFormGroup.controls.dob.value;
const momentDOB1 = dobDate.format('MM/DD/YYYY');
const body = {
'firstName': this.userDetailsFormGroup.controls.firstName.value,
'lastName': this.userDetailsFormGroup.controls.lastName.value,
'address': this.userDetailsFormGroup.controls.address.value,
'dob': momentDOB1,
'gender': this.userDetailsFormGroup.controls.gender.value,
'contactNumber': this.userDetailsFormGroup.controls.contactNumber.value
};
// call http method here
}
getUserProfileData(){
//get http
this.http.get<any>(AppSettings.BASE_URL + '/v1/userProfile/getMyProfile').pipe()
.subscribe(
data => {
const dateDob = moment(data.dob, 'MM/DD/YYYY');
console.log('getting date format :::');
console.log(dateDob.toISOString());
this.userDetailsFormGroup.controls.dob.setValue(dateDob);
}
);
}
Я посоветовал разрешить allowSyntheticDefaultImports (так как для меня нет экспорта с момента использования), используя System. Затем я последовал за советом:
import moment from 'moment';
С моментом, отображаемым в моей конфигурации system.js. Другие операторы импорта не будут работать для меня по какой-либо причине