Angular AOT/Rollup avec des modules qui n'ont pas d'exportation par défaut (comme immutable.js, moment.js)

Question

J'essaye d'ajuster mon application angulaire pour être prêt pour la compilation AOT et Tree Shaking (rollup). Mais j'ai des problèmes en utilisant des modules qui n'ont pas d'export par défaut (immutable.js, moment.js, ...). Selon typscript (look here), il est seulement possible d'utiliser de tels modules avec l'instruction suivante: import x = require('x') ou import * as x from 'x' Mais les deux instructions causent des problèmes lors du rollup. Dans certains cas, je reçois une erreur au cours de la Rollup: Cannot call a namespace ('x') et dans certains cas, je reçois une erreur d'exécution qui: x is undefined

Ici vous trouvez mes Rollup-config.js et TSconfig-aot.json tsconfig-aot_rollup-config.zip

I besoin d'un moyen d'utiliser des paquets comme immutable.js, moment.js pendant la compilation AOT et le rollup. Y a-t-il un moyen de faire cela?

Merci!

Answer 1

MISE À JOUR

J'ai rencontré un problème avec ma réponse précédente. Voici la solution que j'ai trouvée qui fonctionne à la fois dans SystemJs et en utilisant AoT/rollup.

Ma déclaration d'importation est la suivante:

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

puis, dans votre code, l'utiliser comme ceci:

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

Cela est dû à SystemJs et Rollup en utilisant deux méthodes différentes pour résoudre l'importation modules qui n'ont pas une exportation par défaut.

J'ai deux fichiers de configuration de typeScript, un pour systemJs, et un pour exécuter la construction AoT.Les deux ont ce jeu de drapeau dans compilerOptions

"allowSyntheticDefaultImports": true 

---

(réponse précédente)

Je suis tombé sur cette question précise. J'ai pu le faire fonctionner avec les éléments suivants:

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

par opposition à

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

ou

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

dans ma config Rollup, j'ai aussi:

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

La chose qui m'a pointé dans le bon direc tion était this SO answer à une question similaire.

La solution ci-dessus fonctionne avec SystemJs et le processus AoT/Rollup pour Angular. Cela fait un peu de hack-ish car ce n'est pas la manière dactylographiée «typique» d'importer des modules, mais cela m'a permis de contourner le problème.

Answer 2

Le cumul ne fonctionne qu'avec es6. Essayez de changer la cible dans votre TSconfig:

"target": "es6" 

Quand Rollup se terminera, vous pouvez compiler le paquet avec tapuscrit à ES5, avec l'option allowJs: true.

p.s. require est un Webpack-way, avec Rollup utilise la syntaxe d'importation es6.

Answer 3

J'ai trouvé que dans rollup-config.js, dans le livre de cuisine ts, ils ont mis spécifiquement rxjs dans l'include commonJs. Si vous n'utilisez que rxjs, vous pourrez également utiliser des modules tiers.

Par exemple, j'utilise angular2 dématérialiser, donc:

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

ou simplement tous comprennent (trouvé mieux, testé build.js, même taille):

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