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!

score 7 · Accepted Answer · edited May 23 '17 at 12:25

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.

It worked for me, too (updated answer). Thanks a million! – try2fly.b4ucry Nov 25 '17 at 13:37 — try2fly.b4ucry, Nov 25 '17 at 13:37

score 2 · Answer 2 · edited Feb 19 '17 at 10:14

2

I found that in rollup-config.js, in the ts cookbook, they did put specifically rxjs in the commonJs include. If you change from including only rxjs, it will deal with 3rd party modules too.

For example, I'm using angular2-materialize, so:

commonjs({
  include: [
    'node_modules/rxjs/**',
    'node_modules/angular2-materialize/**'
  ],

or simply include all (found it better, tested build.js, same size):

commonjs({
  include: 'node_modules/**'
})

edited Feb 19 '17 at 10:14

Pang

9,564
146
81
122

answered Feb 19 '17 at 10:07

Blazzze IL

99
1
6

I already try it, but it doesn't help with moment.js and immutable.js – Martin Schagerl Feb 21 '17 at 08:06
Please can you provide a working example of angular2-materialize in a AOT/Rollup build- I am really battling with this – P. Moloney Apr 07 '17 at 07:30
1

@P.Moloney luckily i have a starter project just for that that i created for myself.. (the readme is for vsCode).. the readme is kinda for me it's not very detailed... its mainly for the scss compiler https://github.com/Blazzze/Angular2CustomQuickstart – Blazzze IL Apr 08 '17 at 17:32

score 0 · Answer 3 · answered Feb 17 '17 at 04:06

0

Rollup works only with es6. Try to change target in your tsconfig:

"target": "es6"

When rollup will finish, you can compile the bundle with typescript to es5, with option allowJs: true.

p.s. require is a Webpack-way, with Rollup use es6 import syntax.

answered Feb 17 '17 at 04:06

Pavel

2,602
1
27
34

Your approch doesn't work. I try the following: - tsconfig-aot.json: update the target to ES6 - run the transpilation: `ngc -p tsconfig-aot.json` - finished successfully - run the rollup: `rollup -c rollup-config.js` - finished with the following error: `? Cannot call a namespace ('moment')` In the code I import moment with this statement: `import * as moment from "moment";` Is there something wrong? Thanks! – Martin Schagerl Feb 17 '17 at 09:51
ngc do not compiles your typescript. You should update not tsconfig-aot.json, but your primary tsconfig.json (or tsconfig-prod.json, that stays special for production build). Anyway, provide your compiled js-files please. – Pavel Feb 21 '17 at 12:20

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

3 Answers3