Am working on the Angularjs project in which there is requirement to load the css and js files on demand, For this purpose i used the oc.lazyLoad library in angularjs, but some times pages loaded fines and some times it produce errors with loaded files. Following are my code:
.state('datetimepickers', {
url: "/date-time-picker",
templateUrl: "views/date-time-picker.php",
data: {pageTitle: 'Date-Time Pickers'},
controller: "DateTimePickerController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'datetimepicker',
insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
files: [
'assets/global/plugin/bootstrap-datepicker/css/datepicker.css',
'assets/global/plugin/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css',
'assets/global/plugin/bootstrap-datepicker/css/bootstrap-timepicker.min.css',
'assets/global/plugin/bootstrap-datepicker/css/daterangepicker.css',
'assets/global/plugin/bootstrap-datepicker/css/clockface.css',
'assets/global/plugin/bootstrap-datepicker/js/bootstrap-datepicker.js',
'assets/global/plugin/bootstrap-datepicker/js/bootstrap-timepicker.js',
'assets/global/plugin/bootstrap-datepicker/js/clockface.js',
'assets/global/plugin/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js',
'assets/global/plugin/bootstrap-datepicker/js/moment.js',
'assets/global/plugin/bootstrap-datepicker/js/daterangepicker.js',
'js/controllers/DateTimePickerController.js'
]
});
}]
}
})
some times its works just fine , but when page reload it produce errors like:
Error: moment is not a function DateRangePicker@http://localhost/angular/angular/assets/global/plugin/bootstrap-datepicker/js/daterangepicker.js:34:26 $.fn.daterangepicker/<@http://localhost/angular/angular/assets/global/plugin/bootstrap-datepicker/js/daterangepicker.js:1615:40 .each@http://localhost/angular/angular/assets/global/js/jquery-2.2.4.min.js:2:2859 n.prototype.each@http://localhost/angular/angular/assets/global/js/jquery-2.2.4.min.js:2:843 $.fn.daterangepicker@http://localhost/angular/angular/assets/global/plugin/bootstrap-datepicker/js/daterangepicker.js:1611:9 @http://localhost/angular/angular/js/controllers/DateTimePickerController.js:132:5 vf/this.$gethttp://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:147:42 k@http://localhost/angular/angular/assets/global/plugin/angularjs/plugins/angular-ui-router.min.js:7:23267 y/k.compile/http://localhost/angular/angular/assets/global/plugin/angularjs/plugins/angular-ui-router.min.js:7:23401 vf/this.$gethttp://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:147:483 v/y.transitionTo/y.transition<@http://localhost/angular/angular/assets/global/plugin/angularjs/plugins/angular-ui-router.min.js:7:18767 e/<@http://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:130:409 vf/this.$gethttp://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:145:103 vf/this.$gethttp://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:142:165 vf/this.$gethttp://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:145:399 l@http://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:97:248 K@http://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:101:373 gg/http://localhost/angular/angular/assets/global/plugin/angularjs/angular.min.js:102:397