ngRoute breaks everytime I add moment-picker as a dependency

Question

My ngRoute breaks everytime I add another dependency. I want to add the 'moment-picker' to my app to pick dates and times but once I add the dependency to the module, I get the following error:

Uncaught Error: [$injector:modulerr]

On the error page under 'Discription' it shows 'Using ngRoute'.

This is my code:

var app = angular.module('weather', ['ngRoute', 'moment-picker']);

If I remove the 'moment-picker' the ngRoute works perfectly without any errors.

I have tried switching my links to my scripts around, but no luck.

To reproduce the problem we need to see the libraries that you are loading and the order in which you are loading them. — georgeawg, Jun 26 '18 at 10:52
I don't think it is ngRoute per se that breaks. Your dependency injection gets broken, so nothing would work. As @georgeawg said, it would be helpful to see the order you order your scripts. — Kabachok, Jun 26 '18 at 11:14

score 0 · Answer 1 · answered Jun 26 '18 at 13:11

0

If you are using Angular Moment Picker, make sure you have added the corresponding tags to your index.html file (depending on the version that you use):

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.js"></script>
<link href="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css" rel="stylesheet">

<link> tags usually go inside your <head> tag at the beggining, while <script> tags usually take place inside your <body> tag, at the end of that.

answered Jun 26 '18 at 13:11

Bastián Díaz Olave

52
5

Thank you, as just said in my answer, it must have been the order you gave me above that fixed it, as well as how I added my app.config. I do however get this error now with the moment-with-locales.js: _Uncaught SyntaxError: Invalid regular expression: /?|?/: Nothing to repeat_ – PouncingPoodle Jun 26 '18 at 14:16
The problem now is about the Regex Can you make a `console.log(moment.localeData().longDateFormat('LT'))` before you pass the options to `momentPickerProvider`? What's the output? Also, it would be helpful if you provide a more detailed error output, like including the line and the file where the error is found. – Bastián Díaz Olave Jun 26 '18 at 14:39
The output is h:mm A – PouncingPoodle Jun 26 '18 at 14:45
Ok. Can you show me the full error output that you get? – Bastián Díaz Olave Jun 26 '18 at 14:52
That is all I get. The result in the console line is **h:mm A** The error I get refers to moment-with-locales.js:3346 and in that line is `meridiemParse: /?|?/,` and ` /?|?/,` is underlined red. – PouncingPoodle Jun 26 '18 at 15:01
Hmmm that's weird. I just noticed you are loading both `moment.min.js` and `moment-with-locales.js`. You just need `moment-with-locales.js`, since it's the same moment library but including the locales files. Try removing `moment.min.js` from your project and tell me what happens. It's possible that you are loading the wrong moment library, since `moment-with-locale.js` is a dependency of `angular-moment-datepicker`, while `moment.min.js` isn't. – Bastián Díaz Olave Jun 26 '18 at 15:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173857/discussion-between-pouncingpoodle-and-bastian-diaz-olave). – PouncingPoodle Jun 27 '18 at 05:44

score 0 · Accepted Answer · answered Jun 26 '18 at 14:14

It seems like my problem was the order of scripts added, as well as that at a point I removed the 'moment-withh-locales.js' script.

My order now is:

<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.min.js" type="text/javascript"></script>
<script src="scripts/angular-route.js"></script>

<script src="scripts/moment-with-locales.js" type="text/javascript"></script>
<script src="scripts/moment.min.js" type="text/javascript"></script>
<script src="scripts/angular-moment-picker.min.js" type="text/javascript"></script>
<link href="css/angular-moment-picker.min.css" rel="stylesheet" type="text/css"/>

<script src="scripts/app.js" type="text/javascript"></script>

In app.js my code is as follows:

var app = angular.module('weather', ['ngRoute', 'moment-picker']);

app.config(function($routeProvider) 
{
    $routeProvider
    .when("/", {
      templateUrl : "home.php"
    })
    .when("/page1", {
      templateUrl : "page1.php"
    });
});

app.config(['momentPickerProvider', function (momentPickerProvider) {momentPickerProvider.options(
{
    /* Picker properties */
    locale:        'en',
    format:        'L LTS',
    minView:       'decade',
    maxView:       'minute',
    startView:     'year',
    autoclose:     true,
    today:         false,
    keyboard:      false,

    /* Extra: Views properties */
    leftArrow:     '&larr;',
    rightArrow:    '&rarr;',
    yearsFormat:   'YYYY',
    monthsFormat:  'MMM',
    daysFormat:    'D',
    hoursFormat:   'HH:[00]',
    minutesFormat: moment.localeData().longDateFormat('LT').replace(/[aA]/, ''),
    secondsFormat: 'ss',
    minutesStep:   5,
    secondsStep:   1
    });
}]);

Thank you all for helping.

Is this code acceptable having two 'app.config'? It seems really wrong how I'm doing it here, but it does work. — PouncingPoodle, Jun 26 '18 at 14:22
In general, jQuery should be loaded before angular.js so that it can be used by angular.element. Is there a specific reason you loaded it after angular.js? — georgeawg, Jun 26 '18 at 14:33
Also bootstrap.js has a tendency to fight angular.js and cause problems. Is that library really necessary? — georgeawg, Jun 26 '18 at 14:36
According to [angular-moment-picker readme](https://github.com/indrimuska/angular-moment-picker) *Angular Moment Picker is a native AngularJS directive for date and time picker that uses Moment.js and does not require jQuery.* What is the specific reason for loading jQuery? — georgeawg, Jun 26 '18 at 14:43
@georgeawg Without jQuery and bootstrap.js there are some of my web-app's functionality that doesn't work such as the navigation dropdown. — PouncingPoodle, Jun 26 '18 at 14:47
Consider using [tag:angular-ui-bootstrap], a set of AngularJS directives based on Twitter Bootstrap's markup and CSS, **without any dependency on jQuery or Bootstrap's JavaScript.** — georgeawg, Jun 26 '18 at 14:52

ngRoute breaks everytime I add moment-picker as a dependency

2 Answers2