Search code examples
angularjsngrouteangularjs-3rd-party

ngRoute breaks everytime I add moment-picker as a dependency


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.


Solution

  • 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.