Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I'm struggling in using moment.js library inside an Angular 2 Typescript app. Even after reading the answer to this question I can't get it to work.

This is what I did so far:

  • I installed moment.js using npm, so I can find the library under node_modules/moment/moment.js
  • I configured System.js to retrieve moment library:

    System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
          moment: {
            main: 'moment.js',
            type: 'cjs',
            defaultExtension: 'js'
          }
        },
        map: {
          moment: 'node_modules/moment'
        }
    });
    
  • I installed typescript typings with typings install moment-node --ambient --save and typings install moment --ambient --save, so I can see the correct typings inside typings/main/ambient/moment-node and typings/main/ambient/moment

Now, if in my code I use import * as moment from 'moment'; typescript compilation run smooth and I can see the correct suggestion inside Atom editor (if I start with moment(). I can see year(), month(), etc.). However if I run my code inside the browser, it gives an error saying that 'moment is not a function' (debugging I can see that moment is an object with lots of methods).

If I write import moment from 'moment'; the code in the browser runs fine, however typescript compilation fails with 'module moment has no default export' and I can't get any suggestion from Atom while writing code.

What am I doing wrong? What's the correct way to import moment.js (and any non typescript library) inside an Angular 2 typescript application?

share|improve this question
    
Try import moment from 'moment'; – JsIsAwesome Feb 7 at 14:25
    
Thanks for your reply! However, as I said in my answer, if I write import moment from 'moment'; typescript compilation fails and I can't get any suggestion from my IDE when using moment(). – DanyUP Feb 7 at 14:49
up vote 1 down vote accepted
import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;
share|improve this answer
    
Great! This works nicely, thanks! I'm just wondering if there is some way to make the import nicer. I mean: if the moment.js typescript definitions were different, there would be a way to just write moment.default()? If moment.js main file was different, there would be a way to write just moment()? The problem I found with moment.js is tied more to its typescript definition files or to the way it is written? – DanyUP Feb 7 at 16:34

Also I found this: Install Moment.js using NPM:

npm install moment

Add it to your SystemJS configuration:

map: {
  'angular2': 'node_modules/angular2',
  'rxjs': 'node_modules/rxjs',
  'moment': 'node_modules/moment/moment'
}

You also need the interface: tsd install moment --save and then add:

/// <reference path="typings/moment/moment.d.ts" />
import * as moment from 'moment';
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.