Using Rollup for Angular 2's AoT compiler and importing Moment.js
I have finally managed to get rid of both errors. Indeed to avoid:
Cannot call a namespace ('moment')
You need to use:
import moment from 'moment'
Then to avoid
"moment" has no default export
You have to add into your tsconfig.json (compilerOptions):
"allowSyntheticDefaultImports": true
EDIT 17/11/2016
I also had to add the following to my rollup-config.js file:
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: [
'node_modules/rxjs/**',
'node_modules/moment/**'
]
}
}),
uglify()
]
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 theinclude
's of your rollup configs commonjs section (rollup-plugin-commonjs)
Here is what I did to make work moment with typescript (at 2.1.6) and rollup (0.41.4).
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
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')