Using Rollup for Angular 2's AoT compiler and importing Moment.js

Question

I\'m trying to follow the official AoT guide for Angular 2, and I\'m using Moment.js in my application. Moment.js is on my packages.json file, and I\'m using versio

Answer 1

Here is what I did to make work moment with typescript (at 2.1.6) and rollup (0.41.4).

1. To import moment, keep the standard way:

   import * as moment from 'moment';

import moment from 'moment'; is non-standard for a package without a default export, it will result an error at runtime: moment_1.default is not a function

2. In typescript use moment with by casting moment as any, and call the default function:

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

moment(value).format(format) will result an error at rollup tree shaking: Cannot call a namespace ('moment')

Answer 2

Going by this thread, import moment from 'moment'; should work.

Answer 3

I tried all the solutions above, but none worked for me. What worked was

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

Answer 4

We had a similar issue with ng-packagr which uses rollup to generate a module that can be published in an npm repo. Our project was built-up using @angular-cli (using webpack).

We have 2 dependencies that are imported using the asteriks method:

 import * as dataUrl from 'dataurl';

Worked fine, is used like:

 dataUrl.parse(url)

Another import gave the error (Cannot call a namespace) because the exported object is to be used as a function:

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

We could workaround this by assigning the exported initializer function to another const and use that in the code:

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

 svgPanZoom(element);

We also made the tsconfig.json config change as described above.

Versions: ng-packagr: 1.4.1 rollup: 0.50.0 typescript: 2.3.5 @angular/cli: 1.4.8 webpack: 3.7.1

Hope this help,

Rob

Answer 5

As of version 2.13.0,

import * as moment from 'moment';

Answer 6

I found a nice solution for the problem at hand:

Npm-install additional package moment-es6 which provides a default export. Then import from 'moment-es6' instead of from 'moment':

import moment from 'moment-es6';

• For use with systemjs, add the following to the systemjs.config.js map section:
  'moment-es6': 'npm:moment-es6/index.js'

• add 'node_modules/moment-es6/**' to the include's of your rollup configs commonjs section (rollup-plugin-commonjs)