Issue using angular-moment and requirejs

[antho1404]

Because momentjs lib can check if the define function (from requirejs) exists and in this case create a module for requirejs, the moment variable is not global and so cannot be accessible using $window.moment so this create some execution errors.

One fix actually is to load requirejs after momentjs but I think this should be fix

momentjs: v2.5.1
angular-moment: v0.6.2

[AlexanderFedorenko]

The same thing - I have to add moment.js manually right before require.js to make it works

[urish]

Guys, thank you for the feedback. Perhaps you can provide a short jsfiddle / plunkr example showing how you currently use require.js and moment in your angular application?

Thanks!

[AlexanderFedorenko]

I figured out how to fix it by using oficial advice from Moment.js website http://momentjs.com/docs/#/use-it/require-js/

You can define custom module called moment.js (or whatever) with code

define(["moment"], function (moment) {
    moment.lang('ru');
    moment().format();
    return moment;
});

and load it together with moment.js plugin in paths section of require.config

    "momentjs": "../lib/momentjs/moment",
    "moment": "modules/moment", // this is your custom module
    "angular-moment": "../lib/angular-moment/angular-moment"

Also don't forget to write them in shim section as well

    "momentjs": {
        "deps": ["jquery"]
    },
    "moment": {
        "deps": ["momentjs"]
    },
    "angular-moment": {
        "deps": ["angular", "momentjs"]
    }

And finally load this stuff in define

    require("momentjs");
    require("moment");
    require("angular-moment");

[urish]

@AlexMoreStains Please have a look at 46f1a24, does the solution there work for you?
@antho1404 your feedback on this will be appreciated too!

Thanks guys :-)

[antho1404]

Hello,
sorry for the late answer, I just try again and it doesn't works, in my case I load requirejs and angular-moment but I don't load angular-moment using requirejs, I use requirejs for some other scripts.

Here is an example of this case http://plnkr.co/edit/C9rEBk

This fix will work great if we load it using requirejs like @AlexMoreStains says before.

I think the module angularMoment should be created anytime but this cannot be done if we load angular using require... maybe there is no fix for that and we just have to be aware to load all third party script before requirejs

[urish]

@antho1404 The issue here is that when you include require.js, the moment.js library sees it and does not register the global moment object. So the angular-moment will not be able to use moment in this case, unless you go through the standard require.js path

[urish]

I close the issue for now. If there is any issues with the implementation, please explain and re-open.

[WilliamCarter]

I just came across a similar issue myself, possibly the second one @antho1404 came across. The problem I had was that the module is defined with the explicit name: define('angular-moment', ['angular', 'moment'], angularMoment);. I was declaring it as 'angularMoment' in my require config so it wasn't exported despite having the correct path. Please can we remove this restriction? Here's a link to the relevant section in the RequireJS docs: [http://requirejs.org/docs/api.html#modulename]

Here's my working require config for anyone else who comes across this problem:

require.config({
    paths: {
        angular: "../bower_components/angular/angular",
        angularRoute: "../bower_components/angular-route/angular-route",
        angularMocks: "../bower_components/angular-mocks/angular-mocks",
        moment: "../bower_components/moment/moment",
        "angular-moment": "../bower_components/angular-moment/angular-moment",
        gantt: "../bower_components/angular-gantt/assets/angular-gantt"
    },
    shim: {
        angular: { exports: "angular" },
        angularRoute: ["angular"],
        angularMocks: ["angular"],
        gantt: ["angular-moment"]
    }
});

[yanwsh]

I encounter the same issue, If you have the same trouble, please change the declare name to "angular-moment". like "angular-moment": "../bower_components/angular-moment/angular-moment",

[andre-campos]

Following up on @WilliamCarter 's solution: it works.

[andrewboni]

Thanks @WilliamCarter, this worked for me as well.

[urish]

@WilliamCarter, seems like you have nailed it. Can you please send a pull request with the suggested change?

[pspi]

I'm having this problem as well...

[astyfx]

@WilliamCarter thanks for the solution.
In my case, it worked by change the name of library in paths

'angularMoment': '../bower_components/angular-moment/angular-moment.min',

to

''angular-moment': '../bower_components/angular-moment/angular-moment.min',

[kirangsa]

In my case nothing is working

Mu requre file is this

require.config({
baseUrl: 'js',
paths: {
'jquery':'lib/jquery',
'jqueryui':'lib/jquery-ui.min',
'modernzr': 'lib/modernizr',
'angular': 'lib/angular.min',
'angular-route': 'lib/angular-route.min',
'angular-animate': 'lib/angular-animate.min',
'app-start': 'custom/common/app-start',
'app-route': 'custom/common/app-route',
'factory': 'custom/common/factory',
'filter': 'custom/common/filter',
'constants': 'custom/common/constants',
/User defined Files to go here/
'bootstrap': 'lib/ui-bootstrap-tpls-0.12.1.min',
'selectBoxIt': 'lib/jquery.selectBoxIt.min',
"moment": 'lib/moment',
"angular-moment": 'lib/angular-moment',
'login': 'custom/controllers/loginCtrl',
'dashboard' :'custom/controllers/dashboardCtrl',
'projectView' :'custom/controllers/projectViewCtrl',
'projectViewDir' :'custom/directives/projectViewDir'
},
shim: {
'angular-animate': ['angular'],
'angular-route': ['angular', 'angular-animate'],
'app-start': ['angular-route'],
/User defined files to go here/
'login': ['angular'],
'dashboard': ['angular'],
'projectView' :['angular'],
'bootstrap':['jquery'],
'selectBoxIt': ['jquery', 'jqueryui']

},
wrapShim: true

});

require(['app-start']);

and app start file is this

define(['app-route', 'jquery', 'jqueryui', 'moment', 'angular-moment', 'bootstrap', 'selectBoxIt', 'factory', 'projectViewDir', 'constants', 'filter', 'login', 'dashboard', 'projectView'], function (router, jquery, jqueryui, moment,angularMoment, bootstrap, selectBoxIt, factory, projectViewDir, constants, filter, loginModu, dashboardModu, project) {
'use strict';
console.log('in application');

var appName = 'ongc-app',
    depends = ['ngRoute', 'ngAnimate', router.name, factory.name, projectViewDir.name, constants.name, filter.name, loginModu.name, dashboardModu.name, project.name],
    app = angular.module(appName, depends);
angular.bootstrap(document, [appName]);

});

Please anyone help me on this