TypeError: moment is not a function

[mkreis]

I've been following the instruction to use the date picker, but the unfortunately the component throws the following exception:

angular2.dev.js:23514 TypeError: moment is not a function
at DatePicker.init (ng2-datepicker.ts:172)
at new DatePicker (ng2-datepicker.ts:41)
at angular2.dev.js:1380
at Injector._instantiate (angular2.dev.js:11923)

Any clue what could be the cause?
Moment.js included using the SystemJS map (like the date picker).

Thanks!

[jkuri]

I'll check that later today and let you know.

[jkuri]

I made some fixes and published new version (0.4.0) to npm. Please check if it works for you. Also, try including as <script src="node_modules/ng2-datepicker/bundles/ng2-datepicker.js"></script> without adding any mappings.
Please report if it's okay now or just close this issue. Thanks.

[mkreis]

Hi Jan, thanks for looking into this. Unfortunately I still get the same error with 0.4.0.
Removed the mapping from System.JS and then the loader tries to access URL "/moment", which fails.
Only with the mapping, the moment.js is retrieved properly. But then the previous error ("moment is not a function" occurs. Is there any sample project?

[jkuri]

Here is the sample. No problem, this should be working so I will take a look and tested before publishing later today.

[mkreis]

Hey Jan, I just found out I was still using angular2 beta0 - after updating to beta2 the error is gone!

[jkuri]

Cool! Glad you resolved it.

[boban100janovski]

Hey Jan
I am getting this same error, i am using

This is my SystemJS config

<script> System.config({ map: { "ng2-datepicker": "/lib/ng2-datepicker.js", "moment": "/lib/moment.js" }, packages: { transpiler: 'typescript', 'app': { defaultExtension: 'js' } } }); ``` System.import('app/boot') .then(null, console.error.bind(console)); </script>

Everything loads no 404 errors and im using Angular beta2.

I've tried the bundle file but im getting the same error.

[whelanp]

@jkuri

I know this issue is marked as closed but I too am getting moment is not a function also. Updating to beta2 as mention by @mkreis did not work for me.

Here is my System.configuration

<script>
      System.config({
      map: {
      "ng2-datepicker": "node_modules/ng2-datepicker/ng2-datepicker.js",
      "moment": "node_modules/moment/moment.js"
      },
      packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
      }});
      System.import('app/boot').then(null, console.error.bind(console));
    </script>```

[jkuri]

Thanks for noticing guys. I will check into this and make a fix today.

[jkuri]

Hi guys!
I've been struggling with this for some time right now, rewritten this to make it compatible with angular-cli ng install command... but not ready for this just yet.
If anyone needs working example in a hurry please clone this repo, run npm install and then ng serve, open your browser at localhost:4200 and this is it. Source is available in src dir.
When I will have more time, I will resolve this properly, until then please use it as it is done in src directory of this repository. Thanks.

[jkuri]

Or try installing moment separately with npm install moment, I believe this is how @mkreis solved this.

[whelanp]

I'll keep an eye on any updates thanks 👍

npm install moment didn't work for me.

[jkuri]

Guys, I managed to solve this. Moment is now included within the bundles. Please see the readme.

[boban100janovski]

Any way to use it on an already started project?
I'm not too keen on using angular cli

[jkuri]

Are you using SystemJS?

On Sunday, 7 February 2016, Boban Stojanovski notifications@github.com
wrote:

Any way to use it on an already started project?
I'm not too keen on using angular cli

—
Reply to this email directly or view it on GitHub
#5 (comment).

[boban100janovski]

yes i am ... but as u know i am getting the error moment is not a function.
And i don't want to use Angular cli to create a project from scratch and port my code there so i can use Datepicker :)

Anyway nice work on the control

[jkuri]

Ok, no problem, you can install it with nom install ng2-datepicker.

On Sunday, 7 February 2016, Boban Stojanovski notifications@github.com
wrote:

yes i am ... but as u know i am getting the error moment is not a function.
And i don't want to use Angular cli to create a project from scratch and
port my code there so i can use Datepicker :)

Anyway nice work on the control

—
Reply to this email directly or view it on GitHub
#5 (comment).

[jkuri]

Then include the script into your index.html as
node_modules/ng2-datepicker/bundles/ng2-datepicker.js. It should work now.

On Sunday, 7 February 2016, Jan Kuri jkuri88@gmail.com wrote:

Ok, no problem, you can install it with nom install ng2-datepicker.

On Sunday, 7 February 2016, Boban Stojanovski <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

yes i am ... but as u know i am getting the error moment is not a
function.
And i don't want to use Angular cli to create a project from scratch and
port my code there so i can use Datepicker :)

Anyway nice work on the control

—
Reply to this email directly or view it on GitHub
#5 (comment)
.

[boban100janovski]

I created a new test project following the 5min tutorial on Angular.io

Now im getting "EXCEPTION: No value accessor for '' in [test in AppComponent@3:16]"

`import {Component} from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';
import {DatePicker} from 'ng2-datepicker';

class Test {
date: string;
}

@component({
selector: "my-app",
template: <datepicker [(ngModel)]="test"></datepicker>,
directives: [FORM_DIRECTIVES]
})
export class AppComponent {

test: Test;
test1: Test;

constructor() {
    this.test = new Test();
    this.test1 = new Test();

    this.test.date = "09/20/1984",
        this.test1.date = "20.09.1984"
}

}
`

[jkuri]

In orded to get it working in 5 minutes use the commands I provided in
readme. Thanks.

[FranzZemen]

May 25/2016: I'd like to add a working configuration. I ** don't ** use angular-cli. Here's how to get ng2-datepicker working with moment.js. I also use moment.js elsewhere in my code. My code is originally typescript, as you might expect.

index.html snippet at the bottom. Note that I simply "map" the locations for moment.js and ng2-datepicker.js. And for ng2-datepicker, you have to get down to embedded source because the top level file of the same name is not compatible with simply loading it. Then I call the SystemJS import method on the label, and it uses the map value.

In my typescript component, I simply:

import {DatePicker} from 'ng2-datepicker';

and use the imported component per angular2 specifications. Doing this is compatible with the moment loading that occurs within ng2-datepicker. If I need to use moment elsewhere I do this:

import moment from 'moment'

Et voila...it all works.

index.html script snippet

  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      'ng2-datepicker': 'node_modules/ng2-datepicker/src/components/ng2-datepicker.js',
      moment: 'node_modules/moment/moment.js',
      lodash: 'node_modules/lodash'
    }
  });
  System.import('app/main')
      .then(null, console.error.bind(console));
  System.import('moment')
      .then(null, console.error.bind(console));
  System.import('ng2-datepicker')
      .then(null, console.error.bind(console));

[tryptophane]

I've got the same problem, all the solutions mentioned in this thread did not work. Finally I got it to work by modifying the import statement in ng2-datepicker.ts:

import moment from 'moment';

instead of

import * as moment from 'moment';

@jkuri can you maybe fix it in your sources?

I'm using angular rc5 with SystemJS

Here is the relevant part in my index.html (I removed all the mappings which are not relevant in this thread):

<script>
    System.config({
      packages: {
        'app': {format: 'register', defaultExtension: 'js'},
        'ng2-datepicker': {defaultExtension: 'js', main: 'ng2-datepicker.js'},
        'moment': {defaultExtension: 'js', main: 'moment.js'}
      },

      map: {
        'ng2-datepicker': 'node_modules/ng2-datepicker/src/components',
        'moment': 'node_modules/moment'
      }

    });
    System.import('main.js')
      .then(null, console.error.bind(console));
</script>

[jkuri]

Hey @tryptophane, I need to check first if that works with other configurations too. If so, I will update it.