Question

I used NuGet to install Angular File Upload 12.2.13 and feel like I have the dependencies injected correctly but am still getting the following error:

angular.js:63 Uncaught Error: [$injector:modulerr] Failed to instantiate module corePower due to: Error: [$injector:modulerr] Failed to instantiate module ngFileUpload due to: Error: [$injector:nomod] Module 'ngFileUpload' 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 didn't get any errors upon install and can see it registered in my solution.

Here's a look at the injection in my app module:

var corePower = angular.module('corePower', ['ngFileUpload']);

And in the controller where I'm trying to use it:

corePower.controller('newComponentController', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
  $scope.uploadPic = function (file) {
    file.upload = Upload.upload({
      url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
      data: { username: $scope.username, file: file },
    });

    file.upload.then(function (response) {
      $timeout(function () {
        file.result = response.data;
      });
    }, function (response) {
      if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
    }, function (evt) {
      // Math.min is to fix IE which reports 200% sometimes
      file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
    });
  }
}]);

I do wonder if it has to do with the fact we're using a template which uses gulp, and since I'm not familiar with gulp it's already caused some headaches for me with regards to angular.

Here is a look at our gulp file:

    /// <binding BeforeBuild='default' Clean='clean' />
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    less = require("gulp-less"),
    rtlcss = require("gulp-rtlcss");

var paths = { webroot: "./wwwroot/" };
paths.components = paths.webroot + 'components/';

// Sources
paths.js = [
    paths.components + 'app.js',
    paths.components + '**/*.js'
];

//paths.minJs = paths.webroot + "master/js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
//paths.minCss = paths.webroot + "css/**/*.min.css";
paths.less = paths.components + "**/*.less";
paths.lessWatch = paths.less;
// Dests
paths.concatJsDest = paths.webroot + "js";
paths.concatCssDest = paths.webroot + "css";

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src(paths.js)
        .pipe(concat('app.js'))
        //.pipe(uglify())
        .pipe(gulp.dest(paths.concatJsDest));
});
// ew
gulp.task('js:watch', function () {
    gulp.watch(paths.js, ['min:js']);
});

gulp.task('less:app', function () {
    gulp.src(paths.less)
        .pipe(less())
        .on('error', function (err) {
            console.log(err);
        })
        .pipe(concat('app.css'))
        .pipe(gulp.dest(paths.concatCssDest));
});

gulp.task('less:watch', function () {
    gulp.watch(paths.lessWatch, ['less']);
});

gulp.task('less', ['less:app']);

gulp.task('rtl', function () {
    gulp.src(paths.css)
        .pipe(rtlcss())
        .pipe(gulp.dest(paths.concatCssDest));
});

gulp.task("min:css", ["less"], function () {
    gulp.src(paths.css)
        .pipe(cssmin())
        .pipe(gulp.dest(paths.concatCssDest));
});

gulp.task("min", ['min:css', 'min:js']);

gulp.task("watch", ['less:watch', 'js:watch']);

gulp.task("default", ["min:js", "less"]);

Note that I turned off the uglification in our js minification as it was causing some issues getting angular to work.

        gulp.task("min:js", function () {
    return gulp.src(paths.js)
        .pipe(concat('app.js'))
        //.pipe(uglify())
        .pipe(gulp.dest(paths.concatJsDest));
});

Also a quick peek at my Visual Studio 2017 solution depenencies in case it helps

Greatly appreciate any advice!

Answer 1

您是否在index.html中添加了.js文件

<script src="ng-file-upload.min.js"></script>

Error: [$injector:modulerr] Failed to instantiate module ngFileUpload

1 个答案: