CODEWITHSUNDEEP
angularangular-cli
vlio20
vlio20

Reputation: 9295

Add moment to angular 2 (angular cli)

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: img

Any ideas?

Upvotes: 8

Views: 12591

Answers (4)

user1187839
user1187839

Reputation: 21

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"]
 },

Upvotes: 2

vlio20
vlio20

Reputation: 9295

I had to update my cli version: npm uninstall -g angular-cli @angular/cli npm cache clear npm install -g @angular/cli@latest

Upvotes: 1

Maloric
Maloric

Reputation: 5625

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.

Upvotes: 1

choz
choz

Reputation: 17888

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

Upvotes: 16

Related Questions