Moment.js kütüphanesi açısal 2 dizgi uygulamasında nasıl kullanılır?

Ben daktilo bağlama ile kullanmaya çalıştım:

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

test.ts:

import {moment} from 'moment/moment';

Ve olmadan:

npm install moment --save

test.ts:

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

Ancak moment.format () öğesini çağırdığımda bir hata alıyorum. Basit olmalı, herkes işe yarayacak bir komut satırı / içe aktarma kombinasyonu sağlayabilir mi?

Nisan 2017 Güncellemesi:

2.13.0 sürümünden itibaren, Moment bir daktilo tanımı dosyası içermektedir. https://momentjs.com/docs/#/use-it/typescript/

Konsol tipinize npm ile yükleyin

npm install --save moment

Ardından Açısal uygulamanızda içe aktarma şu kadar kolaydır:

import * as moment from 'moment';

İşte bu, tam daktilo desteği alın!

Bonus düzenleme:Moment Varicript'te olduğu gibi bir değişken veya özellik yazmak için bunu yapabilirsiniz örn.

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

momentüçüncü taraf bir global kaynaktır. Nesne windowtarayıcıda yaşadığı an . Bu nedenle importaçısal2 uygulamanızda doğru değil . Bunun yerine <script>, moment.js dosyasını yükleyecek etiketi html'nize ekleyin.

TypeScript'i mutlu etmek için ekleyebilirsiniz

declare var moment: any;

dosyalarınızın üst kısmında derleme hatalarını durdurmak için kullandığınız dosyaları kullanabilirsiniz.

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

veya TypeD'nin kendi başına bulabileceği moment.d.ts dosyasını yüklemek için tsd'yi kullanın.

Misal

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');
}

HTML'nize komut dosyası etiketini eklediğinizden emin olun, aksi takdirde anı olmaz.

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

Modül yükleniyor moment

Öncelikle commonjs dosyalarını yüklemek için System.js gibi bir modül yükleyici kurmanız gerekir

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

Sonra anı gereken yere dosyaya aktarmak için kullanın

import * as moment from 'moment';

veya

import moment = require('moment');

DÜZENLE:

Ayrıca, Webpack veya SystemJS oluşturucu veya Browserify gibi pencere paketinden anı koruyacak bazı paketleyicilerle birlikte seçenekler de vardır. Bunlar hakkında daha fazla bilgi için lütfen talimat için ilgili web sitelerini ziyaret edin.

Aşağıdakiler benim için çalıştı.

İlk olarak, an için tür tanımlarını yükleyin.

typings install moment --save

(Not: DEĞİL --ambient)

Ardından, uygun bir ihracatın olmaması için çalışmak:

import * as moment from 'moment';

Aşağıdaki ile gitmek istiyorum:

npm install moment --save

Sizin için systemjs.config.jsdosyanın mapdizi eklenti:

'moment': 'node_modules/moment'

için packagesdizi eklenti:

'moment': { defaultExtension: 'js' }

Component.ts dosyasında şunları kullanın: import * as moment from 'moment/moment';

ve bu kadar. Bileşeninizin sınıfından kullanabilirsiniz:

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

Şimdi modülleri kullanıyoruz,

Deneyin import {MomentModule} from 'angular2-moment/moment.module';

sonra npm install angular2-moment

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

Bir Typescriptprojede kullanmak için anı kurmanız gerekir:

npm install moment --save

Anı yükledikten .tssonra, içe aktardıktan sonra herhangi bir dosyada kullanabilirsiniz :

import * as moment from "moment";

--- Güncelleme 11/01/2017

Tipler artık kullanımdan kaldırıldı ve yerini npm @types aldı . Bundan böyle tip bildirimleri almak npm dışında hiçbir araç gerektirmeyecek. Moment'i kullanmak için, tip tanımlarını @types yoluyla kurmanız gerekmez, çünkü Moment zaten kendi tip tanımlarını sağlar.

Yani, sadece 3 adıma indirir:

1 - Tür tanımlarını içeren anı yükleyin:

npm install moment --save

2 - Komut dosyası etiketini HTML dosyanıza ekleyin:

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

3 - Şimdi kullanabilirsiniz. Dönemi.

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

--- Orijinal cevap

Bu sadece 3 adımda yapılabilir:

1 - Anlık tanımını yükleyin - * .d.ts dosyası:

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

2 - Komut dosyası etiketini HTML dosyanıza ekleyin:

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

3 - Şimdi kullanabilirsiniz. Dönemi.

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

İçin açısal 7 + (Destekler 8 ve 9) :

1: Anı komutla yükleyin npm install moment --save

2: içine hiçbir şey eklemeyin app.module.ts

3: İçe aktarma ifadesini componentveya bunun gibi herhangi bir dosyanın üstüne ekleyin :import * as moment from 'moment';

4: Artık momentkodunuzun herhangi bir yerinde kullanabilirsiniz . Tıpkı:

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

ng CLI ile

> npm install moment --save

app.module içinde

import * as moment from 'moment';

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

bileşen içinde

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

bu şekilde anı bir kez içe aktarırsınız

GÜNCELLEME Açısal => 5

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

Benim için aot ile ve aynı zamanda evrensel ile çalışır

Hiç kullanmaktan hoşlanmıyorum ama anı kullanmaktan hoşlanıyorum.

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

Angular2-moment kütüphanesinde {{myDate | amTimeAgo}} .html dosyalarında kullanmak için.

Aynı borulara, bir bileşen sınıfı (.ts) dosyasındaki Typescript işlevleri olarak da erişilebilir. Önce kütüphaneyi talimatlara uygun şekilde kurun:

npm install --save angular2-moment

Node_modules / angular2-moment'da artık calendar.pipe.d.ts , date-format.pipe.d.ts ve daha birçok dosya ".pipe.d.ts" olacaktır .

Bunların her biri, eşdeğer boru için Typescript işlev adını içerir; örneğin, DateFormatPipe () , amDateFormatPipe işlevidir .

DateFormatPipe'ı projenizde kullanmak için, app.module.ts dosyasında içe aktarın ve global sağlayıcılarınıza ekleyin:

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

Sonra işlevi kullanmak istediğiniz herhangi bir bileşende, üstte içe aktarın, yapıcıya enjekte edin ve kullanın:

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

İşlevlerden herhangi birini kullanmak için bu işlemi uygulayın. Tüm işlevlere erişmenin bir yolu olsaydı iyi olurdu, ancak yukarıdaki çözümlerin hiçbiri benim için işe yaramadı.

Daha fazla üçüncü taraf paketi eklemeniz uygunsa , angular2-moment kütüphanesini kullandım. Kurulum oldukça basitti ve README ile ilgili en son talimatları izlemelisiniz. Bunun sonucunda yazımlar da kurdum .

Benim için bir cazibe gibi çalıştı ve zar zor çalışması için herhangi bir kod ekledi.

Ancak bunun insanlar için hala bir sorun olup olmadığından emin değilim ... SystemJS ve MomentJS'yi kütüphane olarak kullanmak, bunu benim için çözdü

/*
 * 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;

Oradan benim için iyi çalışıyor.

angular2 RC5 için bu benim için çalıştı ...

npm ile ilk kurulum anı

npm install moment --save

Ardından, kullanmak istediğiniz bileşendeki anı içe aktarın

import * as moment from 'moment';

son olarak systemjs.config.js "harita" ve "paketler" de anı yapılandırın

// 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'un cevabına ek olarak momentjs için daktilo dosyasını değiştirmek zorunda kaldım.

In moment-node.d.tsI değiştirilir:

export = moment;

ile

export default moment;

Moment.js artık v2.14.1'de TypeScript'i destekliyor.

Bkz. Https://github.com/moment/moment/pull/3280

Anent'te Angular'ı kullanmanın kendi sürümü

npm i moment --save

import * as _moment from 'moment';

...

moment: _moment.Moment = _moment();

constructor() { }

ngOnInit() {

    const unix = this.moment.format('X');
    console.log(unix);    

}

İlk içe aktarma anı olarak _moment, daha sonra başlangıç ​​değeri olan momenttürdeki değişkeni bildirin ._moment.Moment_moment()

Anın sade içe aktarılması size herhangi bir otomatik tamamlama vermeyecektir, ancak an adı alanıyla başlatılan paketten ad alanından tür Momentarabirimi ile anı bildirirseniz , anın api'lerinin otomatik olarak tamamlanmasını sağlar._moment'moment'_moment()

An @types typingsgibi vanilya javascript kütüphaneleri için otomatik tamamlama arıyorsanız, bu anı kullanmadan veya açısal sağlayıcıları kullanmanın en açısal yolu olduğunu düşünüyorum .

Eklemeyi deneyin "allowSyntheticDefaultImports": trueadresinden Müşteri tsconfig.json.

Bayrak ne yapar?

Bu temelde TypeScript derleyicisine ES6 içe aktarma ifadesi kullanmanın uygun olduğunu belirtir.

import * as moment from 'moment/moment';

varsayılan dışa aktarma bildirmeyen Moment.js gibi bir CommonJS modülünde. Bayrak, oluşturulan kodu değil, yalnızca tür denetimini etkiler.

Modül yükleyiciniz olarak SystemJS kullanıyorsanız gereklidir. TS derleyicinize SystemJS kullandığınızı söylerseniz bayrak otomatik olarak açılır:

"module": "system"

Bu işlem, IDE'lerden yararlanacak şekilde yapılandırılmışlarsa IDE'ler tarafından atılan hataları da kaldıracaktır tsconfig.json.

systemjs ve jspm ile angular2 için yapmak zorunda:

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 kullanıcıları için

Harici kütüphaneleri kullanmak şu belgedeki dokümanlarda bulunmaktadır:

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

Sadece kitaplığınızı

npm install lib-name - kaydet

ve kodunuza aktarın. Kütüphane yazım içermiyorsa, aşağıdakileri kullanarak yükleyebilirsiniz:

npm install lib-name - kaydet

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

Ardından src / tsconfig.app.json dosyasını açın ve types dizisine ekleyin:

"types": ["lib-name"]

Türleri eklediğiniz kitaplık yalnızca e2e testlerinizde kullanılacaksa, bunun yerine e2e / tsconfig.e2e.json komutunu kullanın. Aynı şey birim testleri ve src / tsconfig.spec.json için de geçerlidir.

Kütüphanede @ türler / adresinde yazımlar yoksa, manuel olarak yazımlar ekleyerek kullanabilirsiniz:

Öncelikle src / klasörünüzde bir typings.d.ts dosyası oluşturun.

Bu dosya otomatik olarak genel tür tanımı olarak eklenecektir. Ardından, src / typings.d.ts dosyasına aşağıdaki kodu ekleyin:

'tipsiz paket' bildirme modülü;

Son olarak, kitaplığı kullanan bileşen veya dosyaya aşağıdaki kodu ekleyin:

'typeless-package' paketini içe aktarma * typeless olarak; typelessPackage.method ();

Bitti. Not: kullanmaya çalıştığınız kitaplık için daha fazla yazı tanımlamak için faydalı olabilir veya bulabilirsiniz.

Sistem'i kullanarak allowSyntheticDefaultImports (benim için kullanılacak andan itibaren dışa aktarma olmadığından) izin verme tavsiyelerini izledim. Sonra birisinin tavsiyesine uydum:

import moment from 'moment';

Anı benim system.js yapılandırmasında eşlenirken. Diğer ithalat beyanları bir nedenden dolayı benim için işe yaramazdı

Aşağıdakiler benim için çalıştı:

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

Moment düğümü, yazı deposunda mevcut değil. Dt önekini kullanarak çalışmasını sağlamak için Definitely Typed'e yönlendirmeniz gerekir.

Systemjs ile yaptığım şey, systemjs.config içinde moment

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

Ve sonra momentsadece yaparak kolayca içe aktarabilirsiniz.

import * as moment from 'moment'

Eski bir iş parçacığı olduğunu biliyorum, ama benim için gerçekten işe yarayan en basit çözüm:

1. Önce yükleme npm install moment --save
2. Node_modules gerektiren ve benim bileşenleri kullanmak:

const moment = require('../../../node_modules/moment/moment.js');

@Component({...})
export class MyComponent {
   ...
   ngOnInit() {
       this.now = moment().format();
   }
   ...
}