After using NuGet to install Angular File Upload 12.2.13, I made sure to inject the dependencies correctly. However, despite this, I keep encountering 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.
There were no errors during installation and I can see it registered in my solution.
Here's how I injected the module in my app:
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 suspect the issue might be related to our template using gulp. As I am unfamiliar with gulp, it has already caused some complications for me regarding Angular.
Below is 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 disabled the uglification in our js minification process as it was causing issues with getting Angular to work properly.
gulp.task("min:js", function () {
return gulp.src(paths.js)
.pipe(concat('app.js'))
//.pipe(uglify())
.pipe(gulp.dest(paths.concatJsDest));
});
Also, here's a visual of my Visual Studio 2017 solution dependencies in case it helps
Any advice would be greatly appreciated!