Angular 2 - Externe Bibliotheken für JIT und AoT importieren

Question

Ich versuche, meine Codebasis so zu konfigurieren, dass ich sowohl JiT als auch AoT ausführen kann, so dass ich JiT für lokale Entwicklung und AoT für die Produktion verwenden kann. Ich bin der angular documentation here gefolgt und habe beide erfolgreich einzeln arbeiten lassen.

Das Problem, mit dem ich konfrontiert bin, ist, wenn ich versuche, externe Bibliotheken zu importieren, insbesondere Moment-js.

Für JiT, ich bin mit SystemJS, die Konfiguration, für die

// systemjs.config.js 

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

Und dann in einer Komponente in Typoskript zu importieren, kann ich nur

// some-component.component.ts 

import * as moment from 'moment/moment'; 

Dies funktioniert gut für die lokale Entwicklung.

Wenn ich versuche, mit Rollup AoT kompilieren, bekomme ich jedoch einen Cannot call a namespace ('moment') Kompilierungsfehler. Ich löste das Problem nach this thread here, so nach ein paar Änderungen an der Rollup Konfiguration sollte der Import-Anweisung in der Komponente

// some-component.component.ts 

import moment from 'moment'; 

werden, die für AoT und Rollup funktioniert gut, aber jetzt SystemJS hat ein Problem, dass das Verständnis.

Ich kann nicht scheinen, aus der Schleife auszubrechen. Ich kann einen zur Arbeit bringen, aber nicht beides zur gleichen Zeit. Gibt es eine Möglichkeit, SystemJS dazu zu bringen, die für Rollup erforderlichen Importanweisungen zu verstehen? Ich denke nicht, dass es umgekehrt möglich ist.

EDIT:

habe ich einen Weg finden, um zumindest es funktioniert, aber es ist nicht gerade ideal. Anstatt es zu importieren, habe ich es einfach als any deklariert und dann die Bibliothek extern mit einem Skript-Tag geladen. So, jetzt ist die Komponente

// some-component.component.ts 

declare const moment: any; 

Wie gesagt, dies ist nicht ideal, da dies mir nicht zulässt, dass Moment bündeln in dem AoT zu bauen, und es zwingt auch Typoskript den ‚Augenblick‘ var als any zu interpretieren Jetzt weiß es nichts über seinen Typ. Das beantwortet meine Frage immer noch nicht genau, aber das funktioniert zumindest.

Answer 1

Halten Import:

import * as moment from 'moment'; 

Und fügen Plugin rollup.js:

{ 
    name: 'replace moment imports', 
    transform: code => ({ 
     code: code.replace(/import\s*\*\s*as\s*moment/g, 'import moment'), 
     map: { mappings: '' } 
    }) 
}, 

Answer 2

Für diejenigen, die nicht wollen, eine benutzerdefinierte rollup.js Plugin hinzuzufügen, oder werden mit einem Paketierungsprogramm wie ng-packagr, betrachten Sie Ihre Import-Anweisung auf die folgende Lösung ersetzt:

import * as momentImported from 'moment'; 
const moment = momentImported; 

Diese Lösung wurde ursprünglich durch die folgende Github Ausgabe zur Verfügung gestellt:
https://github.com/dherges/ng-packagr/issues/217#issuecomment-339460255