directive build error

[YaroslavG]

Hi guys, I added your directive to my project, also added ngStorage, but I all the same got this error:

Failed to instantiate module *** due to: Error: [$injector:modulerr] Failed to instantiate module ngDropImage due to: Error: [$injector:nomod] Module 'ngDropImage' 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. any suggestion?

[anteriovieira]

Hi @YaroslavG , you can provide an example of your code?

[YaroslavG]

Yep, in my project

1. I added this command in terminal: npm i --save angular-drop-image then I added this: npm install ngstorage
2. In my module I added 'ngStorage' and 'ngDropImage', and when run project I received the error described above. Seems it did not find a way to this directive...

[anteriovieira]

:thinking:

[YaroslavG]

just saw this information: NOTE: We are ngstorage and NOT ngStorage. The casing is important! Maybe my problem in this case?

[anteriovieira]

It is possible add angular-drop-image with the help of bower?

Yes

---

Did you add the link to the file?

[YaroslavG]

No, I didn't do it! In my gulp project I don't add direct links to files

[anteriovieira]

I can see your gulp configuration file?

[YaroslavG]

Hi @anteriovieira, thanks for your support. It is conf.js in my gulp directory. Do you means this file ? /**

• This file contains the variables used in other gulp files
• which defines tasks
• By design, we only put there very generic config values
• which are used in several places to keep good readability
• of the tasks */

var gutil = require('gulp-util');

/**

• The main paths of your project handle these with care */ exports.paths = { src: 'src', dist: 'dist', tmp: '.tmp', e2e: 'e2e' };

/**

• Wiredep is the lib which inject bower dependencies in your project
• Mainly used to inject script tags in the index.html but also used
• to inject css preprocessor deps and js files in karma */ exports.wiredep = { exclude: [/\/bootstrap.js$/, /\/bootstrap.css/], directory: 'bower_components' };

/**

• Common implementation for an error handler of a Gulp plugin */ exports.errorHandler = function(title) { 'use strict';

  return function(err) { gutil.log(gutil.colors.red('[' + title + ']'), err.toString()); this.emit('end'); }; };

[anteriovieira]

It is conf.js in my gulp directory. Do you means this file ?

No, sorry, I meant the file where you put your bower dependencies.

[anteriovieira]

Try https://www.npmjs.com/package/bower-npm-resolver for npm packages

{
  "dependencies": {
    ... ,
    "angular-drop-image": "npm:angular-drop-image",
  }
}

[YaroslavG]

This my package.json { "name": "inspinia", "version": "2.7.1", "dependencies": { "angular-drop-image": "^1.0.8" }, "scripts": { "test": "gulp test" }, "devDependencies": { "browser-sync": "~2.9.11", "browser-sync-spa": "~1.0.3", "chalk": "~1.1.1", "del": "~2.0.2", "eslint-plugin-angular": "~0.12.0", "estraverse": "~4.1.0", "gulp": "^3.9.1", "gulp-angular-filesort": "~1.1.1", "gulp-angular-templatecache": "~1.8.0", "gulp-autoprefixer": "~3.0.2", "gulp-eslint": "~1.0.0", "gulp-filter": "~3.0.1", "gulp-flatten": "~0.2.0", "gulp-inject": "~3.0.0", "gulp-less": "~3.0.3", "gulp-load-plugins": "~0.10.0", "gulp-minify-css": "~1.2.1", "gulp-minify-html": "~1.0.4", "gulp-ng-annotate": "~1.1.0", "gulp-protractor": "~1.0.0", "gulp-rename": "~1.2.2", "gulp-replace": "~0.5.4", "gulp-rev": "~6.0.1", "gulp-rev-replace": "~0.4.2", "gulp-size": "~2.0.0", "gulp-sourcemaps": "~1.6.0", "gulp-uglify": "~1.4.1", "gulp-useref": "~1.3.0", "gulp-util": "~3.0.6", "http-proxy-middleware": "~0.9.0", "karma": "~0.13.10", "karma-angular-filesort": "~1.0.0", "karma-coverage": "~0.5.2", "karma-jasmine": "~0.3.6", "karma-ng-html2js-preprocessor": "~0.2.0", "karma-phantomjs-launcher": "~0.2.1", "lodash": "~3.10.1", "main-bower-files": "~2.9.0", "phantomjs": "~1.9.18", "uglify-save-license": "~0.4.1", "wiredep": "~2.2.2", "wrench": "~1.5.8" }, "engines": { "node": ">=0.10.0" } }

[anteriovieira]

1 - Install the package to resolve npm's package

npm install bower-npm-resolver

2 - Add the resolver in your .bowerrc file:

{
  "resolvers": [
    "bower-npm-resolver"
  ]
}

3 - Once configured, your bower.json files may reference packages using npm: prefix:

{
  "dependencies": {
      "angular-drop-image": "npm:angular-drop-image",
  }
}

References

• https://bower.io/docs/pluggable-resolvers/
• https://github.com/mjeanroy/bower-npm-resolver

[YaroslavG]

Hi @anteriovieira, After 3 point when I added dependencies, I can't serve my project. "gulp serve" got error Error: Error: angular-drop-image is not installed. Try running bower install. at /Users/newuser/Sites/ProjectName/admin/node_modules/wiredep/wiredep.js:30:56 at /Users/newuser/Sites/ProjectName/admin/node_modules/wiredep/lib/detect-dependencies.js:145:29, Seems bower-npm-resolver not included right

[anteriovieira]

:thinking: Let me see your .bowerrc file.

[anteriovieira]

and bower.json

[YaroslavG]

.bowerrc { "directory": "bower_components" }, { "resolvers": [ "bower-npm-resolver" ] }

[YaroslavG]

bower.json { "name": "inspinia", "version": "2.7.1", "dependencies": { "angular-toastr": "~1.5.0", "angular-animate": "~1.5.0", "angular-cookies": "~1.5.0", "angular-touch": "~1.5.0", "angular-sanitize": "~1.5.0", "angular-messages": "~1.5.0", "angular-aria": "~1.5.0", "jquery": "^3.1.1", "angular-resource": "~1.5.0", "angular-ui-router": "~0.2.15", "bootstrap": "~3.3.7", "angular-bootstrap": "~1.1.2", "moment": "~2.10.6", "animate.css": "~3.4.0", "angular": "~1.5.0", "pace": "~1.0.2", "metisMenu": "~2.0.2", "fontawesome": "~4.7.0", "angular-file-model": "^0.3.1", "ngclipboard": "^1.1.3", "ng-img-crop": "~0.3.2", "amitava82-angular-multiselect": "~1.2.0", "chosen": "", "angular-summernote": "0.7.1", "angular-drop-image": "npm:angular-drop-image" }, "devDependencies": { "angular-mocks": "~1.5.0" }, "overrides": { "bootstrap": { "main": [ "less/bootstrap.less", "dist/fonts/glyphicons-halflings-regular.eot", "dist/fonts/glyphicons-halflings-regular.svg", "dist/fonts/glyphicons-halflings-regular.ttf", "dist/fonts/glyphicons-halflings-regular.woff", "dist/fonts/glyphicons-halflings-regular.woff2" ] }, "fontawesome": { "main": [ "less/font-awesome.less", "fonts/fontawesome-webfont.eot", "fonts/fontawesome-webfont.svg", "fonts/fontawesome-webfont.ttf", "fonts/fontawesome-webfont.woff", "fonts/fontawesome-webfont.woff2" ] } }, "resolutions": { "jquery": "^3.1.1", "angular": "~1.5.0" } }

[anteriovieira]

You have installed the angular-drop-image package with npm? and bower-npm-resolver