1

I'm working with angular 1.5 if I'm not mistaken and I'm trying to highlight image's area map. I found angular-maphilight http://abdallamohamed.github.io/Angular-Maphilight/#/ but after the two first steps when I launch my project I receive 

 angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module angular-maphilight due to:
Error: [$injector:nomod] Module 'angular-maphilight' 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.

I checked that "angular-maphilight": "*" was added in the bower.json and the folder angular-maphilight into bower_components

index.module.js:

(function() {
  'use strict';

  angular
    .module('app', [...., 'angular-maphilight']);
})();

bower.json

{
  "name": "mwaApp2",
  "version": "0.0.0",
  "dependencies": {
    ...,
    "jquery": "2.2.x",
    ....
    "angular": "1.5.x",
    "angular-maphilight": "*"
  },
  "devDependencies": { ...

and here my rendition.html

<div class="row">
  <div class="col-sm-12">
    <!--<angular-maphilight id="MapTitle">-->

      <img src="{{ rd.paragraph.field_indesign_rendition[1].url }}" height="{{ rd.obj.elem.pageHeight }}" width="{{ rd.obj.elem.pageWidth }}">

      <map>
        <div ng-repeat="articles in rd.obj.elem.articles">

          <area class="area" ng-repeat="articleMembers in articles.articleMembers" shape="poly" title="{{articleMembers.id}}"
                coords='{{ articleMembers.geometricBounds[1] }}, {{ articleMembers.geometricBounds[0] }},
                        {{ articleMembers.geometricBounds[1] }}, {{ articleMembers.geometricBounds[2] }},
                        {{ articleMembers.geometricBounds[3] }}, {{ articleMembers.geometricBounds[2] }},
                        {{ articleMembers.geometricBounds[3] }}, {{ articleMembers.geometricBounds[0] }}'
          />

        </div>
      </map>
    <!--</angular-maphilight>-->

  </div>
</div>
ashleedawg
  • 20,365
  • 9
  • 72
  • 105
Antoine
  • 35
  • 7

1 Answers1

0

Module name for Angular Maphighlight is ngMapHilight not angular-maphighlight

Nobal Mohan
  • 466
  • 7
  • 20
  • Is it always the case ? I know I have something of this kind, for example, {key:"angular-resource", "module": "ngResource"} but there's no trace of angular-maphilight – Antoine Nov 23 '16 at 14:25
  • It's a naming convention. No strict rules. Depend's on repo author. Always cross check with example files. Please accept the answer if the issue is resolved. – Nobal Mohan Nov 23 '16 at 14:27
  • Yup. Pretty much. – Abdalla Elabd Apr 07 '17 at 23:00