I Can't include Angular Datepicker to module

Question

Hey I want to use this module into mine :

https://github.com/720kb/angular-datepicker

I include css here :

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="/javascripts/bootstrap.min.js"></script> 
  <script src="https://use.fontawesome.com/19f59abbe2.js"></script>
  <script src="/javascripts/angular.js"></script> 
  <script src="/javascripts/app.js"></script>
  <link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
  <link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
  <link rel='stylesheet' href='/stylesheets/main.css' />
  <link href="/stylesheets/sass/vendors/font-awesome.min.css" rel="stylesheet">
</head>
<body>

and on end body :

    </div>
  <% include partials/footer.ejs %>
  <script src="/javascripts/angular-datapicker.js"></script> 
</body>
</html>

And when I open page in console I see error :

Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:modulerr] Failed to instantiate module 720kb.datepicker due to: [$injector:nomod] Module '720kb.datepicker' 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. http://errors.angularjs.org/1.6.4/$injector/nomod?p0=720kb.datepicker

also I add inside module :

angular.module('app', ['angular.datepicker'])

How can I repair this?

EDIT:

 <script src="/javascripts/angular.js"></script> 
 <script src="/javascripts/angular-datapicker.js"></script> 
 <script src="/javascripts/angular-datepicker.js"></script> 
 <script src="/javascripts/app.js"></script>
 <link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
 <link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">

Why the top link of angular-datapicker.js is showing error "cant include script" in console where second link bottom loading, and all is ok? if that is the same?

Please see my potential solution. but I don't have much to go by. If you could provide replay-able sample... I could maybe investigate a bit better :) — Rohan Büchner

Rohan Büchner Rohan Büchner · Accepted Answer · 2017-12-13T18:03:30

This is a complete stab in the dark, as you have not provided any reproducible sample.. but by just looking at the snippet you're provided... my best guess is that you're not using any dependency managers etc, and thus are relying on the order of when your scripts are loaded.

If you're app is then inside the body of the app... and you then only load the date-picker at the end... you'd see the problem you're experiencing.

You also have a typo in your file name.

A potential solution could be:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="/javascripts/bootstrap.min.js"></script> 
  <script src="https://use.fontawesome.com/19f59abbe2.js"></script>
  <script src="/javascripts/angular.js"></script> 

  <!--move the datapicker script to here-->
  <script src="/javascripts/angular-datepicker.js"></script>

  <!--rest omitted for brevity-->
</head>

I Can't include Angular Datepicker to module

2 Answers