Add moment to angular 2 (angular cli)

Question

I have followed the guid lines at the cli github page. But I am unable to make it work in my app.
Here is what I did:

1. installed moment: npm install moment --save
2. installed moment ts typings: npm install @types/moment --save
3. imported moment in one of my components: import * as moment from 'moment';

I am getting the following error:

Any ideas?

Answer 1

To install third party library in the newest version of angular-cli is just made simpler. (The webpack version, not systemjs one).

Go to your angular-cli.json on your project root and configure it like,

{
  ...
  "apps": [
     ...
     "scripts": [
        "../node_modules/moment/min/moment.min.js"
     ]
     ...
  ]
  ...
}

Then finally, in your any.component.ts you can import it like this,

import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';

@Component({
    selector: '[id=home]',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
    constructor() { }

    ngOnInit () {
        console.log('today is', moment());
    }
}

Answer 2

This thread is a little old but this is what I needed. Moment now comes with a type definition file and @types/moment is now deprecated in favor of this new file. In order to have moment work with other libraries which extend type definitions from moment like fullcallendar, you'll also need to override the default module resolution in your tsconfig.app.json

"compilerOptions": {
    ...
    "paths": {
        "moment": [
          "../node_modules/moment/moment.d.ts", 
          "../node_modules/moment/min/moment.min.js"
        ]
    },
},

You'll also want to update your angular.json build section to include moment:

 "build": {
      ...,
      "options": {
        ...
        "scripts": [ "node_modules/moment/min/moment.min.js"]
 },

Answer 3

You just need to include to include moment using the CommonJS syntax, rather than import. Try the following:

let moment = require('moment');

This is because moment is not as ES6 module yet, and as such won't work with the newer import syntax.

UPDATE:

When I think about it, I have only used this approach in my unit tests. Using it in your app may not work the same way because this approach uses node's require, which can't be used client side.

However, when using Moment in your components, you can use angular2-moment. Full setup instructions can be found on the GitHub page, but the usage looks like this:

<div>today is {{ Date.now() | amDateFormat:'LL' }}</div>

There are a few other pipes you can use, which are all documented on the GitHub page.

UPDATE 2:

As of v2.10.0, Moment now supports the ES6 syntax, so you should be able to use any ES6 import syntax instead of require.