Jak korzystać z biblioteki moment.js w aplikacji maszynopisu kątowego 2?

Próbowałem użyć go z powiązaniami maszynopisu:

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

test.ts:

import {moment} from 'moment/moment';

I bez:

npm install moment --save

test.ts:

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

Ale kiedy wywołuję moment.format (), pojawia się błąd. Czy powinno być proste, czy ktoś może podać kombinację wiersza polecenia / importu, która działałaby?

Aktualizacja kwietnia 2017 r .:

Począwszy od wersji 2.13.0, Moment zawiera plik definicji maszynopisu. https://momentjs.com/docs/#/use-it/typescript/

Po prostu zainstaluj go z npm w swoim typie konsoli

npm install --save moment

A następnie w aplikacji Angular importowanie jest tak proste:

import * as moment from 'moment';

To wszystko, masz pełną obsługę maszynopisu!

Edycja bonusowa: Aby wpisać zmienną lub właściwość, jak Momentw maszynie do pisania, możesz to zrobić np .:

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

momentjest globalnym zasobem strony trzeciej. Ten moment trwa windoww przeglądarce. Dlatego nie jest to poprawne importw twojej aplikacji angular2. Zamiast tego umieść <script>tag w pliku HTML, który załaduje plik moment.js.

Aby uszczęśliwić TypeScript, możesz dodać

declare var moment: any;

u góry plików, gdzie używasz go, aby zatrzymać błędy kompilacji, lub możesz użyć

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

lub użyj tsd, aby zainstalować plik moment.d.ts, który może samodzielnie znaleźć TypeScript.

Przykład

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

Pamiętaj tylko, aby dodać tag skryptu do kodu HTML, w przeciwnym razie moment nie będzie istniał.

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

Ładowanie modułu moment

Najpierw musisz skonfigurować moduł ładujący, taki jak System.js, aby załadować chwilowe pliki commonjs

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

Następnie zaimportuj moment do pliku, w razie potrzeby użyj

import * as moment from 'moment';

lub

import moment = require('moment');

EDYTOWAĆ:

Istnieją również opcje z niektórymi programami pakującymi, takimi jak Webpack lub Konstruktor SystemJS lub Browserify, które utrzymają chwilę na obiekcie okna. Aby uzyskać więcej informacji na ten temat, odwiedź odpowiednie strony internetowe w celu uzyskania instrukcji.

Poniższe działało dla mnie.

Najpierw zainstaluj na chwilę definicje typów.

typings install moment --save

(Uwaga: NIE --ambient )

Następnie, aby obejść brak odpowiedniego eksportu:

import * as moment from 'moment';

Wybrałbym następujące:

npm install moment --save

Do tablicy systemjs.config.jspliku mapdodaj:

'moment': 'node_modules/moment'

do packagestablicy dodaj:

'moment': { defaultExtension: 'js' }

W pliku component.ts użyj: import * as moment from 'moment/moment';

i to wszystko. Możesz użyć z klasy swojego komponentu:

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

Używamy teraz modułów,

próbować import {MomentModule} from 'angular2-moment/moment.module';

po npm install angular2-moment

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

Aby użyć go w Typescriptprojekcie, musisz zainstalować moment:

npm install moment --save

Po chwili instalacji możesz użyć go w dowolnym .tspliku po zaimportowaniu:

import * as moment from "moment";

--- Aktualizacja 11.01.2017

Pisanie jest teraz przestarzałe i zostało zastąpione przez npm @types . Od teraz uzyskanie deklaracji typu nie będzie wymagało żadnych narzędzi oprócz npm. Aby użyć Moment, nie trzeba instalować definicji typów @types ponieważ Moment już udostępnia własne definicje typów.

Sprowadza się to więc do zaledwie 3 kroków:

1 - moment instalacji, który zawiera definicje typów:

npm install moment --save

2 - Dodaj znacznik skryptu do pliku HTML:

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

3 - Teraz możesz go po prostu użyć. Kropka.

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

--- Oryginalna odpowiedź

Można to zrobić w zaledwie 3 krokach:

1 - Zainstaluj definicję momentu - plik * .d.ts :

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

2 - Dodaj znacznik skryptu do pliku HTML:

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

3 - Teraz możesz go po prostu użyć. Kropka.

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

Dla Angular 7+ (obsługuje również 8 i 9) :

1: Zainstaluj moment za pomocą polecenia npm install moment --save

2: Nie dodawaj nic do app.module.ts

3: Po prostu dodaj instrukcję importu na górze component lub dowolnego innego pliku, takiego jak ten:import * as moment from 'moment';

4: Teraz możesz używać momentdowolnego miejsca w kodzie. Tak jak:

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

z ng CLI

> npm install moment --save

w app.module

import * as moment from 'moment';

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

w składniku

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

w ten sposób zaimportujesz chwilę

AKTUALIZACJA Kątowe => 5

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

Dla mnie działa w prod, ale także w wersji uniwersalnej

Nie lubię korzystać z żadnego momentu, ale wykorzystuję moment

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

Biblioteka angular2-moment ma potoki takie jak {{myDate | amTimeAgo}} do użycia w plikach .html.

Do tych samych potoków można również uzyskać dostęp jako funkcje maszynopisu w pliku klasy komponentów (.ts). Najpierw zainstaluj bibliotekę zgodnie z instrukcją:

npm install --save angular2-moment

W node_modules / angular2-moment będą teraz pliki „.pipe.d.ts”, takie jak calendar.pipe.d.ts , date-format.pipe.d.ts i wiele innych.

Każda z nich zawiera nazwę funkcji Typescript dla równoważnego potoku, na przykład DateFormatPipe () jest funkcją dla amDateFormatPipe .

Aby użyć DateFormatPipe w swoim projekcie, zaimportuj go i dodaj do globalnych dostawców w app.module.ts:

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

Następnie w dowolnym komponencie, w którym chcesz użyć funkcji, zaimportuj ją na górze, wstrzyknij do konstruktora i użyj:

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

Aby użyć dowolnej funkcji, wykonaj ten proces. Byłoby miło, gdyby istniał jeden sposób uzyskania dostępu do wszystkich funkcji, ale żadne z powyższych rozwiązań nie działało dla mnie.

Jeśli możesz dodawać więcej pakietów innych firm, skorzystałem z biblioteki angular2-moment . Instalacja była dość prosta i należy postępować zgodnie z najnowszymi instrukcjami na README. W związku z tym zainstalowałem także pisanie .

Dla mnie działało to jak urok i prawie nie dodałem żadnego kodu, aby go uruchomić.

Nie jestem jednak pewien, czy nadal jest to problem dla ludzi ... Używanie SystemJS i MomentJS jako biblioteki, rozwiązało to dla mnie

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

Stąd działa dla mnie dobrze.

dla angular2 RC5 to zadziałało dla mnie ...

pierwszy moment instalacji za pośrednictwem npm

npm install moment --save

Następnie zaimportuj moment do komponentu, którego chcesz użyć

import * as moment from 'moment';

na koniec skonfiguruj moment w „map” i „paczkach” 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'}
  };

Oprócz odpowiedzi SnareChop musiałem zmienić plik piszący dla momentjs.

W moment-node.d.tszastąpiłem:

export = moment;

z

export default moment;

Moment.js obsługuje teraz TypeScript w wersji 2.2.14.

Zobacz: https://github.com/moment/moment/pull/3280

Moja własna wersja używania 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);    

}

Najpierw importuj moment jako _moment, a następnie zadeklaruj momentzmienną o typie _moment.Momento wartości początkowej _moment().

Zwykły import momentu nie zapewni żadnego automatycznego uzupełniania, ale jeśli zadeklarujesz moment z Momentinterfejsem typu z _momentprzestrzeni nazw z 'moment'pakietu zainicjowanego z wywołaną przestrzenią nazw momentów_moment() , automatycznie dokończysz api chwili.

Myślę, że jest to najbardziej kątowy sposób używania momentu bez użycia @types typingslub angularnych dostawców, jeśli szukasz automatycznego uzupełniania bibliotek javascript waniliowych, takich jak moment.

Spróbuj dodać "allowSyntheticDefaultImports": truedo swojegotsconfig.json .

Co robi flaga?

Zasadniczo informuje to kompilator TypeScript, że można użyć instrukcji importu ES6, tj

import * as moment from 'moment/moment';

w module CommonJS, takim jak Moment.js, który nie deklaruje domyślnego eksportu. Flaga wpływa tylko na sprawdzanie typu, a nie na generowany kod.

Jest to konieczne, jeśli używasz SystemJS jako modułu ładującego moduł. Flaga zostanie automatycznie włączona, jeśli powiesz swojemu kompilatorowi TS, że używasz SystemJS:

"module": "system"

Spowoduje to również usunięcie wszelkich błędów zgłaszanych przez IDE, jeśli są one skonfigurowane do korzystania z tsconfig.json.

dla angular2 z systemjs i jspm musiał zrobić:

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

Dla użytkowników ANGULAR CLI

Korzystanie z bibliotek zewnętrznych znajduje się w dokumentacji tutaj:

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

Wystarczy zainstalować bibliotekę za pośrednictwem

npm install lib-name --save

i zaimportuj go do swojego kodu. Jeśli biblioteka nie zawiera typowania, możesz je zainstalować, używając:

npm install lib-name --save

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

Następnie otwórz plik src / tsconfig.app.json i dodaj go do tablicy typów:

„types”: [„lib-name”]

Jeśli biblioteka, dla której dodałeś typy, ma być używana tylko w testach e2e, zamiast tego użyj e2e / tsconfig.e2e.json. To samo dotyczy testów jednostkowych i src / tsconfig.spec.json.

Jeśli biblioteka nie ma dostępnych typów w @ typy /, możesz nadal z niej korzystać, ręcznie dodając do niej typy:

Najpierw utwórz plik typings.d.ts w folderze src /.

Ten plik zostanie automatycznie dołączony jako definicja typu globalnego. Następnie w src / typings.d.ts dodaj następujący kod:

zadeklaruj moduł „typeless-package”;

Na koniec w komponencie lub pliku korzystającym z biblioteki dodaj następujący kod:

import * as typelessPackage z 'typeless-package'; typelessPackage.method ();

Gotowe. Uwaga: może być potrzebne lub przydatne, aby zdefiniować więcej typów dla biblioteki, której próbujesz użyć.

Postępowałem zgodnie z poradami, aby zezwolić na importSyntheticDefaultImports (ponieważ od teraz nie ma dla mnie eksportu), używając Systemu. Następnie zastosowałem się do czyjejś porady:

import moment from 'moment';

Z chwilą mapowane w mojej konfiguracji system.js. Z innych powodów inne wyciągi z importu nie działałyby dla mnie

Dla mnie działało:

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

Węzeł momentu nie istnieje w repozytorium typów. Musisz przekierować do Zdecydowanie wpisanego, aby działał za pomocą przedrostka dt.

Z systemjs to, co zrobiłem, to wewnątrz mojej systemjs.config dodałem mapę moment

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

A potem możesz łatwo importować moment, wykonując czynności

import * as moment from 'moment'

Wiem, że to stary wątek, ale dla mnie najprostszym rozwiązaniem, które faktycznie działało, było:

1. Instalacja najpierw npm install moment --save
2. W moich komponentach wymagających go z node_modules i użyj go:

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

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