AngularJS 未捕获错误：使用 gulp-concat 后出现 [$injector:modulerr] 错误答案

【问题标题】：AngularJS Uncaught Error: [$injector:modulerr] error after using gulp-concatAngularJS 未捕获错误：使用 gulp-concat 后出现 [$injector:modulerr] 错误
【发布时间】：2016-03-12 00:50:13
【问题描述】：

如果我手动加载所有脚本，我有一个 Angular 应用程序可以工作，但是一旦我尝试使用 gulp-concat 来使用单个 bundle.js 文件就会失败。

我在其他脚本之前从 CDN 加载 AngularJS 和 jQuery，但我确实使用本地文件中的 ngSanitize 和 ngRoute。正如我所说，当我分别加载它们时，一切正常。

jQuery 似乎可以工作（使用 bundle.js 脚本时，一些与 jQuery 相关的任务在网站上工作）。

我按以下顺序收到 2 个控制台错误： Uncaught TypeError: $(...).ready(...) is not a function 和Uncaught Error: [$injector:modulerr]。

我检查了 bundle.js 文件中出现第一个错误的行，但我什至没有在其中使用 .ready()，所以我有点困惑。

我也尝试从 CDN 加载 ngSantize 和 ngRoute 模块，而不是在本地使用它们，但这不起作用。我已经在这里阅读了 SO 以尝试使用我尝试过的 angular-resource，但没有任何运气。我还使用 gulp-order 来确保所有内容的加载顺序与我手动加载的顺序相同。

这是我的 gulpfile.js：

var gulp = require('gulp');
var concat = require('gulp-concat');
var order = require("gulp-order");

gulp.task('scripts', function() {
  return gulp.src('./js/**/*.js')
  .pipe(order([
    "main.js",
    "others/*.js",
    "controllers/*.js",
    "modules/*.js",
    "directives/*.js",
    "filters/*.js"
  ]))
  .pipe(concat('bundle.js'))
  .pipe(gulp.dest('./js/'));
});

gulp.task('default', ['scripts']);

当我检查 bundle.js 文件时，一切似乎都在那里，并且按照我手动加载的顺序。

我还有什么需要做的吗？

更新

我还尝试下载 AngularJS 和 jQuery 的最新缩小版本并将它们捆绑到我的 bundle.js 文件中，但得到相同的 Uncaught Error: [$injector:modulerr] 错误。当我不将它们包含在 bundle.js 中，而是在 bundle.js 之前调用它们时，结果相同。

【问题讨论】：

你还应该包含依赖项，例如 angular、jquery 文件。 Gulp 没有得到 cdn js。
@kazupooot 感谢您的建议。我下载了 jQuery 和 AngularJS 的缩小版本并将其放入 gulp-concat 任务中，并将它们都添加到了 bundle.js 文件的顶部。但我遇到了同样的问题。 jQuery 至少似乎可以检测到，因为 Bootstrap 可以工作……如果没有找到 jQuery，那么 Bootstrap 会在控制台中给出一个特定的错误，而我没有得到那个。
@Chirpizard 你解决了这个问题吗？我有同样的错误。

标签： javascript jquery angularjs gulp gulp-concat

【解决方案1】：

Gulp 不会影响 config.xml 中的字符串。将状态和路由器提供程序设置为字符串，如示例中所示。

var myApp = angular.module('myApp', ['ui.router'])         

// configuring our routes 
myApp.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {    
    $stateProvider    
        // route to show our basic form in login page
        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html',
            controller: 'LoginController'
        })
}]);

【讨论】：