Angular AOT/Rollup with modules which have no default export (like immutable.js, moment.js)

Question

I try to ajust my angular app to be ready for AOT compilation and Tree Shaking (rollup). But I have problems by using modules which have no default exports (immutable.js, moment.js, ...). According to typscript (look here) it is only possible to use such modules with the following statement: import x = require('x')or import * as x from 'x' But both statements cause problems during the rollup. In some cases I get an error during the rollup: Cannot call a namespace ('x') and in some cases I get an runtime error that: x is undefined

Here you find my rollup-config.js and tsconfig-aot.json tsconfig-aot_rollup-config.zip

I need a way to use packages like immutable.js, moment.js during the AOT compilation and rollup. Is there a way to do this?

Thanks!

Answer 1

UPDATE

I ran into an issue with my previous answer. Here is the solution I came to that works in both SystemJs and using AoT/rollup.

My import statement is the following:

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

then, in your code, use it like this:

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

This is due to SystemJs and Rollup using two different methods to resolve importing modules that do not have a default export.

I have two TypeScript Config files, one for systemJs, and one for running the AoT build. Both of them have this flag set in compilerOptions

"allowSyntheticDefaultImports": true

---

(previous answer)

I ran into this exact issue. I was able to get it to work with the following:

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

as opposed to

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

or

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

in my rollup config, I also have:

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

The thing that pointed me in the right direction was this SO answer to a similar question.

The above solution works with both SystemJs and the AoT/Rollup process for Angular. It feels a little hack-ish since it not the 'typical' typescript way of importing modules, but it got me around the issue.