Mit moment.js im Winkel 2 Typoskript-Anwendung

Bin ich zu kämpfen mit moment.js Bibliothek innerhalb einer Eckigen 2 Typoskript-app. Auch nach der Lektüre der Antwort auf diese Frage ich kann nicht ankommen es zu wirken.

Dies ist, was ich getan habe so weit:

  • Ich installiert moment.js mit npm, so kann ich die Bibliothek finden Sie unter node_modules/moment/moment.js
  • Ich konfiguriert System.js abrufen moment Bibliothek: 
    System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      moment: {
        main: 'moment.js',
        type: 'cjs',
        defaultExtension: 'js'
      }
    },
    map: {
      moment: 'node_modules/moment'
    }
});
  • Ich installiert Typoskript-Testungen mit typings install moment-node --ambient --save und typings install moment --ambient --save, damit ich sehen kann, die richtigen Testungen innen-Testungen/Haupt - /ambient - /moment-Knoten und-Testungen/main/ambient/moment

Nun, wenn in meinem code, den ich verwenden import * as moment from 'moment'; typescript-Kompilierung läuft und ich kann sehen, den richtigen Vorschlag, innen-Atom-editor (wenn ich anfange mit moment(). ich sehen kann, Jahr(), Monat(), etc.). Jedoch, wenn ich meine code in den browser, es gibt eine Fehlermeldung, dass "moment ist nicht eine Funktion' (Debuggen kann ich sehen, dass moment ist ein Objekt mit vielen Methoden).

Wenn ich Schreibe import moment from 'moment'; Sie den code in der browser läuft gut, allerdings typescript-Kompilierung schlägt fehl mit "Modul Augenblick hat kein Standard-export' und ich kann nicht jede Anregung aus dem Atom beim schreiben von code.

Was mache ich falsch? Was ist die richtige Art und Weise zu importieren moment.js (und alle nicht-Typoskript-Bibliothek) in eine Eckige 2 Typoskript-Anwendung?

Versuchen Sie, importieren moment 'moment';
Vielen Dank für Ihre Antwort! Aber als ich sagte in meiner Antwort, wenn ich Schreibe import moment from 'moment'; typescript-Kompilierung schlägt fehl, und ich kann nicht jeden Vorschlag von meiner IDE-wenn Sie mit moment().

InformationsquelleAutor DanyUP | 2016-02-07

  1. 4
    import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;
    Super!!! Dies funktioniert gut, danke! Ich Frage mich nur, ob es eine Möglichkeit gibt, um den import-schöner. Ich meine: wenn die moment.js typescript Definitionen waren anders, aber es wäre eine Möglichkeit, nur schreiben moment.Standard()? Wenn moment.js main-Datei war anders, es würde einen Weg geben, schreiben Sie einfach einen moment()? Das problem fand ich mit moment.js gebunden ist mehr zu seiner Typoskript-definition-Dateien oder auf die Art wie es geschrieben ist?
    Das ist nicht richtig. Es funktioniert, aber es ist hässlich und unübersichtlich. Der TypeScript-compiler unterstützt SystemJS mit Fahnen wie allowSyntheticDefaultImports.
    Dies funktioniert zur Laufzeit, aber nicht kompilieren in Visual Studio.

    InformationsquelleAutor Vladimir Trifonov

  2. 4

    Wie schon weiter unten moment Schiffen mit eigener Testungen jetzt.
    Und @Winkel/cli geändert haben aswell. Aktualisiert meine Antwort, um dies zu reflektieren.

    npm i --save moment

    import * as moment from 'moment';

export class SomeClass implements OnInit {

  date: moment.Moment;

  ngOnInit() {
    this.date = moment();
  }

}

    ist alles, was benötigt wird, die mit @Winkel/cli.

    Unten ist meine alte veraltete Antwort.

    Mit Winkel-cli: So erhalten Sie Intellisense in VsCode

    Bearbeiten --> angular-cli-build.js

    module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...

      'moment/min/**', //add this line

      ...
    ]
  });
};

    Bearbeiten --> system-config.ts

    const map: any = {
  moment: 'vendor/moment/min/moment.min.js' //add this line
};

    In der Komponente:

    import * as moment from 'moment';

...
//example of usage
dates: moment.Moment[] = [];

ngOnInit() {
  let date = moment();
  date.add(2, 'days');
  this.dates.push(date);
}

    InformationsquelleAutor Tony Krøger

  3. 1

    Außerdem fand ich dies:
    Installieren Moment.js mit NPM: 

    npm install moment

    Fügen Sie es zu Ihrem SystemJS Konfiguration: 

    map: {
  'angular2': 'node_modules/angular2',
  'rxjs': 'node_modules/rxjs',
  'moment': 'node_modules/moment/moment'
}

    Müssen Sie auch die Schnittstelle:
    tsd install moment --save
    und dann fügen Sie hinzu:

    ///<reference path="typings/moment/moment.d.ts" />
import * as moment from 'moment';
    Moment Schiffe mit seinen eigenen .d....ts-Datei jetzt. Auch tsd-ist veraltet.

    InformationsquelleAutor Vladimir Trifonov

  4. 1

    Von Ihrem index.html hinzufügen

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

    In der Komponente verwenden:

    declare var moment: any;
...

this.startDate = moment().subtract(15, 'days').format('DD-MM-YYYY');
this.endDate = moment().format('DD-MM-YYYY');

    InformationsquelleAutor Sacky San

  5. 0

    Wenn Sie ein Modul importieren mit namespace syntax zu sammeln, die Exporte auf ein einzelnes Objekt, wie in import * as moment from 'moment' Sie nicht importieren, die tatsächlich die moment-Objekt, das das Modul exportiert werden, sondern alle seine Mitglieder. Sie verlieren die call-Signatur. Um dies zu beheben, in einer SystemJS + Typoskript Projekt, geben Sie entweder einen Wert von "system" für das Modul oder den Wert true für allowSyntheticDefaultImports, übergeben diese an den TypeScript-compiler, vorzugsweise über eine tsconfig.json - Datei.
    Dann importieren moment wie so

    import moment from 'moment';

    und alles wird funktionieren.

    InformationsquelleAutor Aluan Haddad

Schreibe einen Kommentar