CODEWITHSUNDEEP
typescriptangularmomentjssystemjs
DanyUP
DanyUP

Reputation: 168

Using moment.js in Angular 2 typescript application

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:

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?

Upvotes: 11

Views: 20764

Answers (5)

Tony Krøger
Tony Krøger

Reputation: 988

As pointed out further down moment ships with its own typings now. And @angular/cli have changed aswell. Updated my answer to reflect this.

npm i --save moment

import * as moment from 'moment';

export class SomeClass implements OnInit {

  date: moment.Moment;

  ngOnInit() {
    this.date = moment();
  }

}

is all that is needed with @angular/cli.

Below is my old outdated answer.

With angular-cli: So you get Intellisense in VsCode

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);
}

Upvotes: 5

Sacky San
Sacky San

Reputation: 1662

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');

Upvotes: 1

Aluan Haddad
Aluan Haddad

Reputation: 31823

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.

Upvotes: 0

Vladimir Trifonov
Vladimir Trifonov

Reputation: 1385

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';

Upvotes: 1

Vladimir Trifonov
Vladimir Trifonov

Reputation: 1385

import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;

Upvotes: 4

Related Questions