Angular AOT/Rollup mit Modulen, die keinen Standard-Export haben (wie immutable.js, moment.js)

Question

Ich versuche, meine eckige App für die AOT-Kompilierung und das Tree Shaking (Rollup) anzupassen. Aber ich habe Probleme mit Modulen, die keine Standard-Exporte haben (immutable.js, moment.js, ...). Laut typscript (siehe here) können solche Module nur mit folgender Aussage verwendet werden: import x = require('x') oder import * as x from 'x' Beide Aussagen verursachen jedoch Probleme beim Rollup. In einigen Fällen bekomme ich einen Fehler während des Rollup: Cannot call a namespace ('x') und in einigen Fällen ich einen Laufzeitfehler erhalten, dass: x is undefined

Hier können Sie meine Rollup-config.js und TSconfig-aot.json tsconfig-aot_rollup-config.zip

Ich finde benötigen eine Möglichkeit, Pakete wie immutable.js, moment.js während der AOT-Kompilierung und des Rollups zu verwenden. Gibt es eine Möglichkeit, dies zu tun?

Danke!

Answer 1

UPDATE

Ich stieß auf ein Problem mit meiner vorherigen Antwort. Hier ist die Lösung, die ich in beiden SystemJs und mit AoT/Rollup funktioniert.

Meine Import-Anweisung ist die folgende:

import * as moment from 'moment'; 
const momentJs = (moment as any).default ? (moment as any).default : moment; 

, dann in Ihrem Code, es wie folgt verwendet werden:

const startDateString = momentJs(startDate).format('YYYY-MM-DD'); 

Dies ist auf SystemJs und Rollup zwei verschiedene Methoden zu lösen importieren Module, die keinen Standard-Export haben.

Ich habe zwei TypeScript Config-Dateien, eine für systemJs und eine für die Ausführung der AoT-Build.Beide haben dieses Flag gesetzt in compilerOptions

"allowSyntheticDefaultImports": true 

---

(vorherige Antwort)

ich in genau diesem Problem lief. Ich konnte sie mit folgendem an die Arbeit:

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

im Gegensatz zu

import moment from "moment"; // won't work 

oder

import moment = require('moment'); //won't work 

in meinem Rollup Config, ich habe auch:

commonjs({ 
     include: [ 
      'node_modules/rxjs/**', 
      'node_modules/moment/**', 
      'node_modules/hammerjs/**' 
     ] 
    }), 

Die Sache, die mich in die richtige Richtung wies Die Frage war this SO answer zu einer ähnlichen Frage.

Die obige Lösung funktioniert sowohl mit SystemJs als auch mit dem AoT/Rollup-Prozess für Angular. Es fühlt sich ein bisschen hack-ish an, da es nicht die "typische" Typoskript-Methode zum Importieren von Modulen ist, aber es hat mich um das Problem gebracht.

Answer 2

Rollup funktioniert nur mit es6. Versuchen Ziel in Ihrem TSconfig zu ändern:

"target": "es6" 

Wenn Rollup wird abgeschlossen haben, können Sie das Bundle mit Typoskript kompilieren ES5, mit der Option allowJs: true.

p.s. require ist ein Webpack-Weg, wobei Rollup die es6-Import-Syntax verwendet.

Answer 3

Ich fand, dass in rollup-config.js, in der ts Kochbuch, sie speziell rxjs in den commonJs enthalten haben. Wenn Sie nur rxjs einbeziehen, wird es auch mit Modulen von Drittanbietern umgehen.

Zum Beispiel verwende ich angular2-materialisieren, so:

commonjs({ 
    include: [ 
    'node_modules/rxjs/**', 
    'node_modules/angular2-materialize/**' 
    ], 

oder einfach beinhalten alle (fand es besser, getestet build.js, gleiche Größe):

commonjs({ 
    include: 'node_modules/**' 
})