Utilisation de Rollup pour le compilateur AoT d'Angular 2 et importation de Moment.js

Question

Je suis en train de suivre les officiel AoT guide Angulaire 2, et je suis en utilisant Moment.js dans mon application. Moment.js est sur mes paquets.json fichier, et j'utilise la version 2.15.0. J'ai été à l'importation comme ça pour l'instant:

import * as moment from 'moment';

Mais quand j'arrive à la partie où je dois courir cumulatif, je me retrouve avec l'erreur suivante:

Ne peut pas appeler un espace de noms ('moment')

Qui semble être liée à la façon dont je l'importation moment selon ce. Alors, comment suis-je censé faire? Je n'arrive pas à importer moment de toute autre manière. Si j'utilise

import moment from 'moment'

Je reçois le message d'erreur de compilation

Module externe "moment" n'a pas de défaut à l'exportation

Answer 1

J'ai enfin réussi à me débarrasser de ces deux erreurs. En effet à éviter:

Ne peut pas appeler un espace de noms ('moment')

Vous devez utiliser:

import moment from 'moment'

Alors pour éviter d'

"moment" n'a pas de défaut à l'exportation

Vous devez ajouter dans votre tsconfig.json (compilerOptions):

"allowSyntheticDefaultImports": true

EDIT 17/11/2016

J'ai également eu à ajouter ce qui suit à mon rollup-config.js fichier:

plugins: [
  nodeResolve({jsnext: true, module: true}),
  commonjs({
    include: [
        'node_modules/rxjs/**',
        'node_modules/moment/**'
      ]
    }
  }),
  uglify()
]

Answer 2

J'ai trouvé une belle solution pour le problème à la main:

Npm-installer des package moment-es6 qui fournit une valeur par défaut à l'exportation. Puis les importer à partir de moment-es6' au lieu de 'moment':

import moment from 'moment-es6';

• Pour une utilisation avec systemjs, ajoutez ce qui suit à l'systemjs.config.js section de carte:
  'moment-es6': 'npm:moment-es6/index.js'

• ajouter 'node_modules/moment-es6/**' de la include's de votre cumulatif configs commonjs section (cumulatif-plugin-commonjs)

Answer 3

Voici ce que j'ai fait pour rendre le travail moment avec tapuscrit (à 2.1.6) et cumulatif (0.41.4).

1. Pour importer moment, garder le standard:

   import * as moment from 'moment';

import moment from 'moment'; est non-standard pour un forfait sans une exportation par défaut, il en résultera une erreur à l'exécution: moment_1.default is not a function

2. En caractères d'imprimerie utilisation moment avec la coulée moment que tout, et d'appeler l' default fonction de:

   var momentFunc = (moment as any).default ? (moment as any).default : moment;
   var newFormat = momentFunc(value).format( format );
   

moment(value).format(format) entraînera une erreur au cumulatif arbre de criblage: Cannot call a namespace ('moment')

Answer 4

Nous avons eu un problème similaire avec ng-packagr qui utilise cumulatif de générer un module qui peut être publié dans un mécanisme de prévention des pensions. Notre projet a été construit à l'aide de @angulaires-cli (à l'aide de webpack).

Nous avons 2 dépendances qui sont importées à l'aide de la asteriks méthode:

 import * as dataUrl from 'dataurl';

A bien fonctionné, est utilisé comme:

 dataUrl.parse(url)

Une autre importation a donné l'erreur (Impossible d'appeler un espace de noms) parce que l'objet exporté doit être utilisé comme une fonction:

 import * as svgPanZoom from 'svg-pan-zoom';
 svgPanZoom(element); <== error: Cannot call a namespace

On peut contourner ce problème en attribuant à l'exportation de l'initialiseur de la fonction à l'autre const et de l'utiliser dans le code:

 import * as svgPanZoomImport from 'svg-pan-zoom';
 const svgPanZoom = svgPanZoomImport;

 svgPanZoom(element);

Nous avons également fait le tsconfig.json config modifier comme décrit ci-dessus.

Versions: ng-packagr: 1.4.1 cumulatif: 0.50.0 tapuscrit: 2.3.5 @angulaire/cli: 1.4.8 webpack: 3.7.1

Espérons que cette aide,

Rob

Answer 5

J'ai eu le même problème décrit ci-dessus.

import * as moment from 'moment'; - travaillé lors de l'élaboration et de chargement à l'aide d'systemjs, mais pas pendant cumulatif.

import moment from 'moment'; - a travaillé dans un cumulatif de construire, mais pas au cours du développement.

Pour éviter d'avoir à changer le code selon le type de build, j'ai juste ajouté moment comme un système global et créé une fonction d'aide qui je l'importation partout, j'ai besoin de l'utiliser au lieu de l'importation moment.

Cela signifie que le même code fonctionne pour les deux types de scénarios. Il n'est pas particulièrement jolie, si il y a une meilleure manière s'il vous plaît laissez-moi/nous le faire savoir!

Voici la fonction d'assistance, a ajouté de son propre fichier momentLoader.ts

import { default as mom } from 'moment';
export default function moment(args?: any): mom.Moment {
    let m = window["moment"];
    if (!m) { 
        console.error("moment does not exist globally.");
        return undefined;
    }
    return m(args);
}

Pour utiliser moment dans d'autres classes, je viens d'importer la fonction et l'appeler comme si j'avais importé moment directement:

import moment from '../../momentLoader';

let d = moment().utc("1995-12-25");

let m = moment("1995-12-25");

Pour obtenir systemjs pour charger un mondial, j'ai simplement suivi ces étapes. http://momentjs.com/docs/#/use-it/system-js/

Dans mon cas, le moment de config pour systemjs ressemble à ceci:

let meta = {
    'lib:moment/moment.js': { format: 'global' }
};

System.config({
    paths: paths,
    map: map,
    packages: packages,
    meta: meta
});

System.import('lib:moment/moment.js');

Pour le cumulatif de construction, vous devrez vous assurez moment.js est ajouté à la page quelque part via une balise script, comme il ne sera pas inclus dans le correctif cumulatif fichier build malheureusement.