Getting error on adding angular-daterangepicker javascript files

Question

My angular js code is as below. I am adding DateRangePicker with following library

 var inApp = angular.module('myApp', ['daterangepicker']); inApp.controller('incomeController', function($scope, $http) { console.log('income controller'); $scope.datePicker = { date: {startDate: null, endDate: null} }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.js"></script> <script src="https://raw.githubusercontent.com/fragaria/angular-daterangepicker/master/js/angular-daterangepicker.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css" /> <div ng-app="myApp" ng-controller="incomeController"> <div class="form-group"> <label for="optsCustom" class="control-label">Select Date</label> <div> <input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" /> </div> </div> </div>

It is showing following error

angular.js:14642 TypeError: r.daterangepicker is not a function
at h (angular-daterangepicker.min.js:1)
at angular-daterangepicker.min.js:1
at Scope.$digest (angular.js:18210)
at Scope.$apply (angular.js:18480)
at done (angular.js:12501)
at completeRequest (angular.js:12727)
at XMLHttpRequest.requestLoaded (angular.js:12655)

How to resolve this?

Answer 1

The issue is that you are using GitHub as a CDN (which is againt its terms of use).

The URL https://raw.githubusercontent.com/fragaria/angular-daterangepicker/master/js/angular-daterangepicker.js has a Content-Type at text/plain; charset=utf-8 text/plain; charset=utf-8 . It can't be used inside a script since it's neither text/javascript nor application/javascript .

More details here: https://github.blog/2013-04-24-heads-up-nosniff-header-support-coming-to-chrome-and-firefox/

Remark: you should use angular.js instead of angular.min.js , in DEV environment since the error message is more clear:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module daterangepicker due to:
Error: [$injector:nomod] Module 'daterangepicker' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.