Angular file-saver unknown provider

Question

I installed angular-file-saver with

bower install angular-file-saver

Then I added the dependancy in my bower.json file :

{
  "name": "app",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.4.0",
    "bootstrap": "^3.2.0",
    "file-saver.js": "^1.20150507.2"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "app",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  }
}

The bower.json from file-saver.js is

{
  "name": "file-saver.js",
  "main": "FileSaver.js",
  "version": "1.20150507.2",
  "homepage": "https://github.com/Teleborder/FileSaver.js",
  "authors": [
    "Eli Grey (http://eligrey.com)"
  ],
  "description": "A saveAs() FileSaver implementation",
  "keywords": [
    "File",
    "FileSaver",
    "saveAs"
  ],
  "license": "LICENSE.md",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests",
    "demo",
    "FileSaver.min.js"
  ]
}

Then I imported it in my controller :

controller('MainCtrl', ['$http', 'file-saver.js', function ($http, fs) {

But I get the error :

Error: "[$injector:unpr] Unknown provider: file-saver.jsProvider <- file-saver.js <- MainCtrl
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=file-saver.jsProvider%20%3C-%20file-saver.js%20%3C-%20MainCtrl"

I tried other names like file-saver, FileSaver, FileSaver.js but nothing works.

Mehdi Benmoha · Accepted Answer · 2019-05-16 11:54:14Z

1

The documentation says that you need to import the ngFileSaver module in your module and then inject FileSaver in your component. Here's the example provided:

angular
  .module('fileSaverExample', ['ngFileSaver'])
  .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);

After that, you can invoke FileSaver.saveAs method.

answered May 16, 2019 at 11:54

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Antoine Olivier Over a year ago

Now I have [$injector:modulerr] Failed to instantiate module ngFileSaver due to: [$injector:nomod] Module 'ngFileSaver' 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.

Mehdi Benmoha Over a year ago

have you added the filesaver module js file to your index.html file ? or How are you using bower to inject dependencies ?

Antoine Olivier Over a year ago

Bower automatically added "<script src="bower_components/file-saver.js/FileSaver.js"></script>" to my index.html file.

Mehdi Benmoha Over a year ago

Oh your bower.json file contains file-saver.js while you installed angular-file-saver. Replace that and it should work

Antoine Olivier Over a year ago

I didn't even see there was two folder I'm so dumb. Thanks so much.

|

Collectives™ on Stack Overflow

Angular file-saver unknown provider

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related