Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

directive build error #1

Open
YaroslavG opened this issue Jan 31, 2018 · 18 comments
Open

directive build error #1

YaroslavG opened this issue Jan 31, 2018 · 18 comments

Comments

@YaroslavG
Copy link

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
Copy link
Contributor

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

@YaroslavG
Copy link
Author

YaroslavG commented Jan 31, 2018

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
Copy link
Contributor

🤔

@YaroslavG
Copy link
Author

YaroslavG commented Jan 31, 2018

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

@anteriovieira
Copy link
Contributor

anteriovieira commented Jan 31, 2018

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

Yes


Did you add the link to the file?

@YaroslavG
Copy link
Author

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

@anteriovieira
Copy link
Contributor

anteriovieira commented Jan 31, 2018

I can see your gulp configuration file?

@YaroslavG
Copy link
Author

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
Copy link
Contributor

anteriovieira commented Feb 1, 2018

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
Copy link
Contributor

anteriovieira commented Feb 1, 2018

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

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

@YaroslavG
Copy link
Author

YaroslavG commented Feb 1, 2018

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
Copy link
Contributor

anteriovieira commented Feb 1, 2018

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

@YaroslavG
Copy link
Author

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
Copy link
Contributor

🤔 Let me see your .bowerrc file.

@anteriovieira
Copy link
Contributor

and bower.json

@YaroslavG
Copy link
Author

YaroslavG commented Feb 2, 2018

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

@YaroslavG
Copy link
Author

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants