current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 5 down vote favorite

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'; – PatrickJane 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
    
This is not right. It works but it is ugly and confusing. The TypeScript compiler supports SystemJS with flags such as allowSyntheticDefaultImports. – Aluan Haddad May 30 at 3:30
    
This works at runtime, but does not compile within Visual Studio. – Eric Grover Aug 16 at 17:19
up vote 1 down vote

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
    
Monent ships with its own .d.ts file now. Also tsd is deprecated. – Aluan Haddad Sep 22 at 6:25
up vote 1 down vote

With angular-cli: So you get Intellisense in VsCode

npm i --save moment

edit --> angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...

      'moment/min/**', // add this line

      ...
    ]
  });
};

edit --> system-config.ts

const map: any = {
  moment: 'vendor/moment/min/moment.min.js' // add this line
};

In your component:

import * as moment from 'moment';

...
// example of usage
dates: moment.Moment[] = [];

ngOnInit() {
  let date = moment();
  date.add(2, 'days');
  this.dates.push(date);
}
share|improve this answer
up vote 0 down vote

When you import a module using namespace syntax to gather the exports onto a single object, as in import * as moment from 'moment', you are not importing the actually moment object which the module exports, but rather all of its members. You are losing the call signature. To resolve this, in a SystemJS + TypeScript project, specify either a value of "system" for module or a value of true for allowSyntheticDefaultImports, passing these to the TypeScript compiler, preferably via a tsconfig.json file. Then import moment like so

import moment from 'moment';

and everything will work.

share|improve this answer
up vote 0 down vote

From your index.html add

 <script src="../node_modules/moment/moment.js"></script>

In your component use:

declare var moment: any;
...

this.startDate = moment().subtract(15, 'days').format('DD-MM-YYYY');
this.endDate = moment().format('DD-MM-YYYY');
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.