完全未更改的源代码中的错误

Question

我正在恢复 Angular 应用程序的工作，该应用程序是我大约 12 个月前作为实习生开始的。 以前没有我现在遇到的错误。现在，当我将存储库克隆到我的新计算机，甚至是我最初开发应用程序的旧计算机时，我收到以下错误：

(intermediate value)(intermediate value)(...) is not a function

Failed to instantiate module app due to Error: [$injector:modulerr] Failed to instantiate module ngSanitize due to: Module 'ngSanitize' is not available

bower.json

"dependencies": {
  "angular": "~1.4.7",
  "angular-bootstrap": "~0.14.3",
  "angular-ui-router": "~0.2.15",
  "bootstrap": "~3.3.5",
  "checklist-model": "~0.6.0",
  "font-awesome": "fontawesome#~4.4.0",
  "ngSignaturePad": "*",
  "signature_pad": "~1.5.1",
  "angular-bootstrap-datetimepicker": "latest",
  "moment": "~2.10.6",
  "angular-sanitize": "~1.4.7",
  "ui-select": "angular-ui-select#~0.13.2",
  "angular-touch": "~1.4.7",
  "angular-ui-grid": "~3.0.7",
  "angular-spinner": "~0.8.0",
  "angularPrint": "angular-print#~0.3.8",
  "lodash": "~4.13.1"
},
"resolutions": {
  "angular": "~1.4.7"
}

ngSanitize 模块包含在 js 依赖项的 gulpfile 中，并在 angular.module 中声明。

gulp.task('js-deps', function () {
gulp.src([
    './public/bower_components/moment/moment.js',
    './public/bower_components/jquery/dist/jquery.min.js',
    './public/bower_components/bootstrap/dist/js/bootstrap.js',
    './public/bower_components/lodash/dist/lodash.min.js',
    './public/bower_components/angular/angular.min.js',
    './public/bower_components/angular-ui-grid/ui-grid.min.js',
    './public/bower_components/angular-ui-router/release/angular-ui-router.min.js',
    './public/bower_components/checklist-model/checklist-model.js',
    './public/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
    './public/bower_components/signature_pad/signature_pad.js',
    './public/bower_components/ngSignaturePad/ngSignaturePad.min.js',
    './public/bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.js',
    './public/bower_components/angular-sanitize/angular-sanitize.min.js',
    './public/bower_components/ui-select/dist/select.min.js',
    './public/bower_components/angular-touch/angular-touch.min.js',
    './public/bower_components/spin.js/spin.min.js',
    './public/bower_components/angular-spinner/angular-spinner.min.js',
    './public/bower_components/angularPrint/angularPrint.js'
  ])
  .pipe(concat('deps.js'))
  .pipe(gulp.dest('./build/js'));

angular-sanitize.min.js.map 也包括在内

gulp.src([
    './public/bower_components/angular/angular.min.js.map',
    './public/bower_components/angular-sanitize/angular-sanitize.min.js.map',
    './public/bower_components/angular-touch/angular-touch.min.js.map'
  ])
  .pipe(gulp.dest('./build/js'));

角度模块

angular.module('app', [
    'ui.grid',
    'ui.router',
    'ui.bootstrap',
    'checklist-model',
    'ngSignaturePad',
    'ui.bootstrap.datetimepicker',
    'ngSanitize',
    'ui.select',
    'ngTouch',
    'angularSpinner',
    'AngularPrint'
  ])

好消息是，我学到了很多关于使用 Docker 和 vagrant 文件等工具捕获环境的重要性。

我正在努力思考当我第一次开发应用程序时和现在之间有什么不同。

在我的旧电脑上，我已经更新了npm、nodejs，可能还有gulp -g和bower -g，但我不确定。

我认为npm 或nodejs 没有问题，因为问题不在于服务器或npm 依赖项。我可以启动服务器就好了。错误显示在浏览器控制台中。问题可能在于gulp 如何构建代码包。

我尝试安装每个旧版本，重新安装依赖项，然后重新构建代码，但无济于事。

我可以看到带有ngSanitize 的依赖代码包，但如果构建中出现错误，我不知道要查找什么。

我在哪里寻找解决这个问题的下一个线索？

Answer 1

感谢我的导师 Greg 帮助我解决这个问题。

这个错误是模糊的，解决方案没有说明为什么会发生这一切，但它是：

ui.bootstrap.datetimepickerfails 之后的所有内容。

angular.module('app', [
    'ui.grid',
    'ui.router',,
    'ui.bootstrap',
    'checklist-model',
    'ngSignaturePad',
    'ui.bootstrap.datetimepicker',
    'ngSanitize',
    'ui.select',
    'ngTouch',
    'angularSpinner',
    'AngularPrint'
  ])

如果我注释掉ngSanitize，那么ui.select 会失败，以此类推。

如果我在 datetimepicker.js 文件的末尾添加一个分号，则构建工作正常并且不再出现错误。一种解脱，但仍然令人沮丧。

对于遇到同样问题的其他人，这是我修改 gulpfile 以添加所需的 ; 的方法。

npm install --save gulp-insert

在 gulpfile 中需要 gulp-insert

在文件连接发生之前添加.pipe(insert.append(';'))

  var insert = require('gulp-insert');
  ...
  ...
  './public/bower_components/angular-spinner/angular-spinner.min.js',
  './public/bower_components/angularPrint/angularPrint.js'
])
.pipe(insert.append(';'))
.pipe(concat('deps.js'))
.pipe(gulp.dest('./build/js'));