错误：[$injector:modulerr] 无法实例化模块 ngFileUpload

Question

我使用 NuGet 安装 Angular File Upload 12.2.13，感觉我的依赖项注入正确，但仍然出现以下错误：

angular.js:63 Uncaught Error: [$injector:modulerr] 无法实例化模块 corePower 由于： 错误：[$injector:modulerr] 无法实例化模块 ngFileUpload，原因是： 错误：[$injector:nomod] 模块“ngFileUpload”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我在安装时没有收到任何错误，并且可以看到它已在我的解决方案中注册。

下面看一下我的应用模块中的注入：

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

在我尝试使用它的控制器中：

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));
    });
  }
}]);

我确实想知道这是否与我们正在使用使用 gulp 的模板这一事实有关，而且由于我不熟悉 gulp，所以关于 angular 已经让我有些头疼了。

这是我们的 gulp 文件：

    /// <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"]);

请注意，我在我们的 js 缩小中关闭了 uglification，因为它会导致一些问题变得有角度工作。

        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

非常感谢任何建议！

Answer 1

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

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