javascriptangularjswebpackangular-calendar

angular.js Uncaught Error: [ng:areq] Argument 'fn' is not a function, got Moment while working on angular-ui-calendar based calendar widget

I've found this topic earlier es6 import moment.js in angular angular.js Error: [ng:areq] Argument 'fn' is not a function, got Moment, unfortunately, it wasn't solved. So I decided to refresh this question and ask it again, this time by myself.

I'm importing moment.js from inside my app.js file, which is a source of my app's main module initialization:

...
import 'jquery/dist/jquery.js';
import moment from 'moment/moment.js';
import 'fullcalendar/dist/fullcalendar.min.js';
import 'fullcalendar/dist/gcal.min.js';
import 'angular-ui-calendar/src/calendar.js';

const app = angular
  .module('app', [
    uiRouter,
    uiBootstrap,
    'ui.bootstrap.datetimepicker',
    uiMask,
    cookies,
    ngTranslate,
    'ng-currency',
    moment,
    'ui.calendar',
    sanitize,
    uiSelect,
    uiNotification,
    'mm.acl',
    Common.name,
    Components.name
  ])

Above shown way of importing and dependency injection of moment.js lib, causes such error:

Uncaught Error: [ng:areq] Argument 'fn' is not a function, got Moment
http://errors.angularjs.org/1.5.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20Moment

Really don't know how to make it work. Also, using webpack for app building process, but all new libraries and directives are imported into app's code directly, with ES6 import or require statements. I'm not using webpack config for building and loading every single 3rd party module with webpack. Don't have any clue how to import moment.js and make it work

Solution

  • You should use angular-moment instead of the native momentjs package.