CODEWITHSUNDEEP
javascriptangularjsdatepicker
Aneta Jabłońska
Aneta Jabłońska

Reputation: 125

I Can't include Angular Datepicker to module

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?

Upvotes: 0

Views: 837

Answers (2)

Rohan B&#252;chner
Rohan B&#252;chner

Reputation: 5393

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>

Upvotes: 1

edo.n
edo.n

Reputation: 2410

You've misspelled it to angular-datApicker.js It should be angular-datEpicker.js

Upvotes: 0

Related Questions