Ошибка при добавлении файлов angular -daterangepicker javascript

Question

Мой angular js код, как показано ниже. Я добавляю DateRangePicker со следующей библиотекой

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>

Отображается следующая ошибка

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)

Как решить эту проблему?

Answer 1

Проблема в том, что вы используете GitHub в качестве CDN (что опять-таки является его условиями использования).

URL https://raw.githubusercontent.com/fragaria/angular-daterangepicker/master/js/angular-daterangepicker.js имеет Content-Type при text/plain; charset=utf-8. Его нельзя использовать внутри script, так как он не text/javascript и application/javascript.

Подробнее здесь: https://github.blog/2013-04-24-heads-up-nosniff-header-support-coming-to-chrome-and-firefox/

Примечание: вы следует использовать angular.js вместо angular.min.js в среде DEV, поскольку сообщение об ошибке более ясно:

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.