Wie verwende ich die Bibliothek moment.js in der Angular 2 Typoskript-App?

Ich habe versucht, es mit Typoskript-Bindungen zu verwenden:

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

test.ts:

import {moment} from 'moment/moment';

Und ohne:

npm install moment --save

test.ts:

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

Aber wenn ich moment.format () aufrufe, erhalte ich eine Fehlermeldung. Sollte einfach sein, kann jemand eine Befehlszeilen- / Importkombination bereitstellen, die funktionieren würde?

Update April 2017:

Ab Version 2.13.0 enthält Moment eine Typoskript-Definitionsdatei. https://momentjs.com/docs/#/use-it/typescript/

Installieren Sie es einfach mit npm in Ihrem Konsolentyp

npm install --save moment

In Ihrer Angular-App ist der Import so einfach:

import * as moment from 'moment';

Das war's, Sie erhalten volle Typescript-Unterstützung!

Bonusbearbeitung: Um eine Variable oder Eigenschaft wie Momentin Typescript einzugeben, können Sie dies tun, z.

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

momentist eine globale Ressource eines Drittanbieters. Der Moment, in dem das Objekt windowim Browser weiterlebt. Daher ist importes in Ihrer Angular2-Anwendung nicht korrekt . Fügen Sie stattdessen die<script>Fügen Sie Tag in Ihr HTML ein, das die Datei moment.js lädt.

Um TypeScript glücklich zu machen, können Sie hinzufügen

declare var moment: any;

oben in Ihren Dateien, wo Sie es verwenden, um die Kompilierungsfehler zu stoppen, oder Sie können verwenden

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

Oder verwenden Sie tsd, um die Datei moment.d.ts zu installieren, die TypeScript möglicherweise selbst findet.

Beispiel

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

Stellen Sie nur sicher, dass Sie das Skript-Tag in Ihrem HTML-Code hinzufügen, da sonst kein Moment vorhanden ist.

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

Modul laden moment

Zuerst müssten Sie einen Modullader wie System.js einrichten , um die momentan gemeinsamen Dateien zu laden

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

Dann, um Moment in die Datei zu importieren, wo nötig

import * as moment from 'moment';

oder

import moment = require('moment');

BEARBEITEN:

Bei einigen Bundlern wie Webpack oder SystemJS Builder oder Browserify gibt es auch Optionen, die den Moment vom Fensterobjekt fernhalten. Weitere Informationen hierzu finden Sie auf den jeweiligen Websites.

Folgendes hat bei mir funktioniert.

Installieren Sie zunächst die Typdefinitionen für den Moment.

typings install moment --save

(Hinweis: NICHT --ambient )

Um das Fehlen eines ordnungsgemäßen Exports zu umgehen:

import * as moment from 'moment';

Ich würde mit folgendem gehen:

npm install moment --save

Fügen Sie systemjs.config.jsdem mapArray Ihrer Datei Folgendes hinzu:

'moment': 'node_modules/moment'

zum packagesArray hinzufügen:

'moment': { defaultExtension: 'js' }

Verwenden Sie in Ihrer component.ts: import * as moment from 'moment/moment';

und das ist es. Sie können aus der Klasse Ihrer Komponente Folgendes verwenden:

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

Wir verwenden jetzt Module,

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

nach dem npm install angular2-moment

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

Um es in einem TypescriptProjekt zu verwenden, müssen Sie momentan installieren:

npm install moment --save

Nach der Installation können Sie es .tsnach dem Import in einer beliebigen Datei verwenden:

import * as moment from "moment";

--- Update 11/01/2017

Typings ist jetzt veraltet und wurde durch npm @types ersetzt . Ab sofort sind für das Abrufen von Typdeklarationen außer npm keine Tools mehr erforderlich. Um Moment zu verwenden, müssen Sie die Typdefinitionen nicht über @types installieren da Moment bereits eigene Typdefinitionen bereitstellt.

Es reduziert sich also auf nur 3 Schritte:

1 - Installieren Sie den Moment, der die Typdefinitionen enthält:

npm install moment --save

2 - Fügen Sie das Skript-Tag in Ihre HTML-Datei ein:

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

3 - Jetzt können Sie es einfach verwenden. Zeitraum.

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

--- Ursprüngliche Antwort

Dies kann in nur 3 Schritten erfolgen:

1 - Momentdefinition installieren - * .d.ts Datei:

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

2 - Fügen Sie das Skript-Tag in Ihre HTML-Datei ein:

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

3 - Jetzt können Sie es einfach verwenden. Zeitraum.

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

Für Angular 7+ (unterstützt auch 8 und 9) :

1: Moment auf Befehl installieren npm install moment --save

2: Fügen Sie nichts in die app.module.ts

3: Fügen Sie einfach eine Importanweisung über Ihre componentoder eine andere Datei wie diese ein:import * as moment from 'moment';

4: Jetzt können Sie momentüberall in Ihrem Code verwenden. So wie:

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

mit ng CLI

> npm install moment --save

in app.module

import * as moment from 'moment';

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

in Komponente

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

Auf diese Weise importieren Sie Moment einmal

UPDATE Angular => 5

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

Für mich arbeitet in prod mit aot und auch mit universal

Ich benutze nur einen Moment. Moment, den ich bekam

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

Die Angular2-Moment-Bibliothek enthält Pipes wie {{myDate | amTimeAgo}} zur Verwendung in HTML-Dateien.

Auf dieselben Pipes kann auch als Typescript-Funktion in einer Komponentenklassendatei (.ts) zugegriffen werden. Installieren Sie zuerst die Bibliothek wie angewiesen:

npm install --save angular2-moment

In den node_modules / angle2-moment befinden sich nun ".pipe.d.ts" -Dateien wie calendar.pipe.d.ts , date-format.pipe.d.ts und viele mehr.

Jede dieser Funktionen enthält den Typescript-Funktionsnamen für die entsprechende Pipe. Beispielsweise ist DateFormatPipe () die Funktion für amDateFormatPipe .

Benutzen DateFormatPipe in Ihrem Projekt zu verwenden, importieren Sie es und fügen Sie es Ihren globalen Anbietern in app.module.ts hinzu:

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

Importieren Sie dann in einer Komponente, in der Sie die Funktion verwenden möchten, sie oben, injizieren Sie sie in den Konstruktor und verwenden Sie:

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

Befolgen Sie diesen Vorgang, um eine der Funktionen zu verwenden. Es wäre schön, wenn es einen Weg gäbe, auf alle Funktionen zuzugreifen, aber keine der oben genannten Lösungen hat für mich funktioniert.

Wenn Sie weitere Pakete von Drittanbietern hinzufügen möchten , habe ich die Angular2-Moment- Bibliothek verwendet. Die Installation war ziemlich einfach und Sie sollten die neuesten Anweisungen in der README-Datei befolgen. Infolgedessen habe ich auch Schreibvorgänge installiert .

Hat für mich wie ein Zauber funktioniert und kaum Code hinzugefügt, damit es funktioniert.

Ich bin mir nicht sicher, ob dies immer noch ein Problem für Menschen ist. Mit SystemJS und MomentJS als Bibliothek wurde es für mich gelöst

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

Funktioniert gut von dort für mich.

für angle2 RC5 hat das bei mir funktioniert ...

erster install moment über npm

npm install moment --save

Importieren Sie dann den Moment in die Komponente, die Sie verwenden möchten

import * as moment from 'moment';

Zuletzt konfigurieren Sie den Moment in systemjs.config.js "map" und "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'}
  };

Zusätzlich zu SnareChops Antwort musste ich die Typisierungsdatei für momentjs ändern.

In moment-node.d.tsersetzte ich:

export = moment;

mit

export default moment;

Moment.js unterstützt jetzt TypeScript in Version 2.14.1.

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

Meine eigene Version von 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);    

}

Zuerst Moment importieren als _moment, dann momentVariable mit Typ _moment.Momentmit dem Anfangswert von deklarieren _moment().

Der einfache Import des Moments führt nicht zu einer automatischen Vervollständigung, aber wenn Sie den Moment mit der MomentTypschnittstelle aus dem _momentNamespace aus dem 'moment'Paket deklarieren, das mit dem aufgerufenen Moment-Namespace initialisiert wurde_moment() Sie die automatische Vervollständigung der Moment-APIs.

Ich denke, dies ist die eckigste Art, Moment ohne Verwendung @types typingsoder eckige Anbieter zu verwenden, wenn Sie nach einer automatischen Vervollständigung für Vanille-Javascript-Bibliotheken wie Moment suchen.

Versuchen Sie, "allowSyntheticDefaultImports": truezu Ihrem hinzuzufügen tsconfig.json.

Was macht die Flagge?

Dies teilt dem TypeScript-Compiler im Grunde mit, dass es in Ordnung ist, eine ES6-Importanweisung zu verwenden, d. H.

import * as moment from 'moment/moment';

auf einem CommonJS-Modul wie Moment.js, das keinen Standardexport deklariert. Das Flag wirkt sich nur auf die Typprüfung aus, nicht auf den generierten Code.

Dies ist erforderlich, wenn Sie SystemJS als Modullader verwenden. Das Flag wird automatisch aktiviert, wenn Sie Ihrem TS-Compiler mitteilen, dass Sie SystemJS verwenden:

"module": "system"

Dadurch werden auch alle von IDEs ausgelösten Fehler entfernt, wenn sie für die Verwendung von konfiguriert sind tsconfig.json.

für angle2 mit systemjs und jspm musste man tun:

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

Für ANGULAR CLI-Benutzer

Die Verwendung externer Bibliotheken finden Sie in der Dokumentation hier:

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

Installieren Sie einfach Ihre Bibliothek über

npm install lib-name --save

und importieren Sie es in Ihren Code. Wenn die Bibliothek keine Typisierungen enthält, können Sie sie installieren mit:

npm install lib-name --save

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

Öffnen Sie dann src / tsconfig.app.json und fügen Sie es dem Typarray hinzu:

"types": ["lib-name"]

Wenn die Bibliothek, für die Sie Typisierungen hinzugefügt haben, nur für Ihre e2e-Tests verwendet werden soll, verwenden Sie stattdessen e2e / tsconfig.e2e.json. Gleiches gilt für Unit-Tests und src / tsconfig.spec.json.

Wenn in der Bibliothek unter @ types / keine Typisierungen verfügbar sind, können Sie diese weiterhin verwenden, indem Sie manuell Typisierungen hinzufügen:

Erstellen Sie zunächst eine typings.d.ts-Datei in Ihrem src / -Ordner.

Diese Datei wird automatisch als globale Typdefinition aufgenommen. Fügen Sie dann in src / typings.d.ts den folgenden Code hinzu:

Deklarieren Sie das Modul 'typeless-package'.

Fügen Sie schließlich in der Komponente oder Datei, die die Bibliothek verwendet, den folgenden Code hinzu:

* als typelessPackage aus 'typeless-package' importieren; typelessPackage.method ();

Getan. Hinweis: Möglicherweise benötigen oder finden Sie nützliche Informationen, um weitere Typisierungen für die Bibliothek zu definieren, die Sie verwenden möchten.

Ich habe den Rat befolgt, allowSyntheticDefaultImports (da für mich kein Export von Moment zu Moment möglich ist) mit System zuzulassen. Dann folgte ich dem Rat von jemandem:

import moment from 'moment';

Mit dem Moment, der in meiner system.js-Konfiguration abgebildet wird. Die anderen Importanweisungen würden aus irgendeinem Grund für mich nicht funktionieren

Folgendes hat bei mir funktioniert:

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

Der Moment-Knoten ist im Typisierungs-Repository nicht vorhanden. Sie müssen zu Definitely Typed umleiten, damit es mit dem Präfix dt funktioniert.

Mit systemjs habe ich in meiner systemjs.config map for hinzugefügt moment

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

Und dann können Sie einfach importieren, momentindem Sie einfach tun

import * as moment from 'moment'

Ich weiß, dass es ein alter Thread ist, aber für mich war die einfachste Lösung, die tatsächlich funktioniert hat:

1. Zuerst installieren npm install moment --save
2. In meinen Komponenten, die es von node_modules benötigen und verwenden:

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

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