Angular2 with Typescript AOT+Rollup Error

[piyushxh]

Dear friend
I am having trouble in importing momentjs

momentjs import statement in component
import * as moment from 'moment';

and used like
formatDate(date:Date, format: string){
return moment(date).format(format);
}

it works fine in Angular2 JIT Compilation while in development mode
but when I try to compile using Angular2 AOT it gives error "Cannot call a namespace ('moment')"

please help need solution in urgent

Thanks

[vittau]

I have this problem as well, and I would really like to know why does it have to be so hard to use moment with Angular 2... I have literally exhausted every possibility I can think of to make it work with both AoT and JIT.

[maggiepint]

So, it looks like this was asked/answered on Stack Overflow.

[sam-s4s]

It appears the fix on stackoverflow is only a partial fix...

It makes rollup happy, but nothing else (systemjs, webpack, etc.) do not compile.

I am using both (webpack for dev, rollup for prod)... Is there any actual fix for this? :)

Why is it that moment seems to export in such a strange way, that many things have problems importing it correctly? This will be the second time I've had to do research on how to import moment into an angular2 environment...

[benelliott]

@maggiepint Nope, as the commenter above mentioned, changing

import * as moment from 'moment';

to

import moment from 'moment';

makes Rollup happy but breaks things like SystemJS.

The typical Angular setup is to use SystemJS for unit tests and something like Rollup for production builds, but there is no one way to import Moment that supports both.

Please could you reopen this?

[sam-s4s]

Yes, agreed.

I currently have to have a custom plugin in my build script that literally does a text find and replace of import * as moment with import moment for my production rollup build (vs my dev webpack build) - and that is a pretty bad/messy solution...

[jcjolley]

@maggiepint, It seems you have prematurely closed this issue. I have the same issues as @sam-s4s and @benelliott. The 'answers' on stackoverflow are ugly hacks. This issue makes including moment in an angular 2+ library a mess.

[AnthonyNahas]

@benelliott that works for other modules too ! ❤️ thank you

[sam-s4s]

As a side-note, I have since ditched Rollup, and moved to the angular-cli for builds. Much better process. And internally it just uses Webpack. I highly recommend people do the same, if at all possible.

Now I can just use import * as moment from 'moment'; and it works for all my builds :P

[AnthonyNahas]

@sam-s4s I agree 👍

[jvquarck]

@sam-s4s angular-cli uses rollup internally for building libs, atleast on v7...

[sam-s4s]

I believe it does! And Webpack 4 for some other stuff. I upgraded recently, and everything seems to be working correctly :)