Usando Rollup para el compilador AoT de Angular 2 e importando Moment.js

typescript momentjs

Question

Intento seguir la guía oficial de AoT para Angular 2 y estoy usando Moment.js en mi aplicación. Moment.js está en mi archivo packages.json y estoy usando la versión 2.15.0. Lo he estado importando así hasta ahora:

import * as moment from ''moment'';

Pero cuando llego a la parte donde tengo que ejecutar el paquete acumulativo, termino con el siguiente error:

No se puede llamar a un espacio de nombre (''momento'')

Lo cual parece estar relacionado con la forma en que importo el momento según this . Entonces, ¿cómo se supone que debo hacer esto? No puedo importar el momento de otra manera. Si uso

import moment from ''moment''

Obtengo el error de compilación

El '''' momento '''' del módulo externo no tiene exportación predeterminada

Answer 1

A partir de la versión 2.13.0,

import * as moment from ''moment'';

Answer 2

Encontré una buena solución para el problema en cuestión:

Npm: instala el paquete adicional moment-es6 que proporciona una exportación predeterminada. Luego importe desde ''momento-es6'' en lugar de desde ''momento'':

import moment from ''moment-es6'';

• Para usar con systemjs, agregue lo siguiente a la sección del mapa systemjs.config.js:
  ''moment-es6'': ''npm:moment-es6/index.js''

• agregue ''node_modules/moment-es6/**'' a las inclusiones de su sección de configuración común de rollup (rollup-plugin-commonjs)

Answer 3

Estaba teniendo los mismos problemas descritos anteriormente.

import * as moment from ''moment''; - Funcionó al desarrollar y cargar a través de systemjs, pero no durante el rollup.

import moment from ''moment''; - Funcionó en una compilación rollup pero no durante el desarrollo.

Para evitar tener que cambiar el código según el tipo de compilación, agregué el momento como global y creé una función de ayuda que importo en todos los lugares donde necesito usarla en lugar de importar el momento.

Esto significa que el mismo código funciona para ambos tipos de escenarios. Sin embargo, no es particularmente bonito, si hay una mejor manera, por favor déjenme saberlo.

Aquí está la función auxiliar, agregada a su propio archivo 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);
}

Para usar el momento en otras clases solo importo la función y la llamo como si hubiera importado el momento directamente:

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

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

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

Para que systemjs lo cargue como global, simplemente seguí estos pasos. http://momentjs.com/docs/#/use-it/system-js/

En mi caso, la configuración de momento para systemjs se ve así:

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

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

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

Para la construcción del rollup, deberás asegurarte de que se agregue moment.js a la página en algún lugar a través de una etiqueta de script, ya que no se incluirá en el archivo de compilación rollup por desgracia.

Answer 4

Esto es lo que hice para hacer un momento de trabajo con mecanografiado (en 2.1.6) y acumulación (0.41.4).

1. Para importar el momento, mantén la forma estándar:

   import * as moment from ''moment'';

import moment from ''moment''; no es estándar para un paquete sin una exportación predeterminada, se producirá un error en el tiempo de ejecución: moment_1.default is not a function

2. En mecanografiado, use el momento con el momento de lanzamiento como cualquier, y llame a la función default :

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

moment(value).format(format) dará como resultado un error en el balanceo del árbol de resumen: Cannot call a namespace (''moment'')

Answer 5

Finalmente logré deshacerme de ambos errores. De hecho para evitar:

No se puede llamar a un espacio de nombre (''momento'')

Necesitas usar:

import moment from ''moment''

Entonces para evitar

"momento" no tiene exportación predeterminada

Tienes que agregarlo a tsconfig.json (compilerOptions):

"allowSyntheticDefaultImports": true

EDITAR 17/11/2016

También tuve que agregar lo siguiente a mi archivo rollup-config.js:

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

Answer 6

Probé todas las soluciones anteriores, pero ninguna funcionó para mí. Lo que funcionó fue

import moment from ''moment-with-locales-es6'';

Answer 7

Siguiendo este hilo , import moment from ''moment''; Deberia trabajar.

Answer 8

Tuvimos un problema similar con ng-packagr que usa rollup para generar un módulo que se puede publicar en un repositorio npm. Nuestro proyecto fue desarrollado usando @ angular-cli (usando webpack).

Tenemos 2 dependencias que se importan utilizando el método asteriks:

 import * as dataUrl from ''dataurl'';

Funcionó bien, se usa como:

 dataUrl.parse(url)

Otra importación dio el error (no se puede llamar a un espacio de nombres) porque el objeto exportado se va a utilizar como una función:

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

Podríamos solucionar esto asignando la función del inicializador exportado a otro const y usar eso en el código:

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

 svgPanZoom(element);

También hicimos que la configuración de tsconfig.json cambiara como se describió anteriormente.

Versiones: ng-packagr: 1.4.1 rollup: 0.50.0 mecanografiado: 2.3.5 @ angular / cli: 1.4.8 webpack: 3.7.1

Espero que esto ayude,

Robar