Module 'mdPickers' is not available

Question

I'm building an Angular App, using this Angular Seed as my base: https://github.com/angular/angular-seed

Everything was working well until I tried to add the module mdPickers using these instructions and now I'm getting the error below. I don't understand what's making mdPickers error out when I had no issues with moment.js or Angular Material.

At first I thought my dependencies were out of date, but I've since updated them and the error has not changed. I know I've spelled the module correctly and I know I've installed it. What am I missing?

Edit before anyone asks: I did check that all dependencies needed for mdPicker were installed and at least at the minimum required version. They are.

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.view2 due to:
Error: [$injector:modulerr] Failed to instantiate module mdPickers due to:
Error: [$injector:nomod] Module 'mdPickers' 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=mdPickers

Here is the dependencies section of my package.json:

"dependencies": {
  "angular-material": "^1.1.4",
  "moment": "^2.18.1",
  "moment-timezone": "^0.5.13",
  "mdPickers": "^0.7.5"
}

My module (if more JS would be helpful, let me know. But there's not much else just yet):

angular.module("myApp.view2", [
  "ngRoute",
  "ngMaterial",
  "ngAnimate",
  "ngAria",
  "ngMessages",
  "mdPickers"
]);

HTML script tags at the bottom of <body>:

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script><script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>

@jos i realize now I probably should've used `` but again, this doesn't change the error — Rokitar, Jun 14 '17 at 03:28
@jos that got me a different error! Now it says `Unknown provider: $$HashMapProvider` etc. This feels like a different, more easily solved issue. So thank you! — Rokitar, Jun 14 '17 at 03:36
Possible duplicate of [How to use a bower package component into my project](https://stackoverflow.com/questions/37441892/how-to-use-a-bower-package-component-into-my-project) — jos, Jun 14 '17 at 03:51

score 0 · Answer 1 · answered Jun 14 '17 at 03:47

Check this codepen :https://codepen.io/alenaksu/pen/eNzbrZ

You will need Angular, Moment & Angular Material as scripts.

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js

https://cdn.rawgit.com/alenaksu/mdPickers/0.7.4/dist/mdPickers.min.js

score 0 · Accepted Answer · answered Jun 14 '17 at 03:47

0

Install mdPicker using.

 npm install mdPickers --save-dev
 bower install mdPickers --save

the exact path of your mdPicker shoud be given in your index.html

 <script src="bower_components/mdPickers/mdPickers.js"></script>

answered Jun 14 '17 at 03:47

jos

1,082
5
19
45

Module 'mdPickers' is not available

2 Answers2