Angular 无法在生产构建中实例化模块答案

【问题标题】：Angular failed to instantiate modules in production buildAngular 无法在生产构建中实例化模块
【发布时间】：2016-12-07 20:03:15
【问题描述】：

我正在尝试使用 gulp 和 bower 将需要新的第三方模块的功能添加到 Angular 应用程序。在开发模式下一切都很好，但我添加的任何新模块都会在生产中产生臭名昭著的"Failed to instantiate module" 错误。我尝试禁用 uglify 构建步骤，但没有任何区别。只需将新模块声明为我自己的一个模块的依赖项就足以产生错误。

与许多这些问题不同，我已经在使用字符串数组语法来处理依赖项，并且该应用程序已经与各种其他模块一起运行。我发现我添加的内容与已在使用的其他库之间没有区别。

这是我目前尝试包含ngCookies，但我对其他人也做过同样的事情，例如。 ngFileUpload 结果相同。

bower.json：

  "dependencies": {
    "jquery": "^2.1.4",
    "angular": "^1.5.9",
    "angular-sanitize": "^1.4.5",
    "extras.angular.plus": "^0.9.2",
    "moment": "^2.10.3",
    "angular-ui-router": "^0.2.15",
    ...
    "angular-cookies": "^1.5.9", // new
  },

index.html：

<!-- build:js js/lib.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/extras.angular.plus/ngplus-overlay.js"></script>
<script src="/bower_components/moment/moment.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
...
<script src="/bower_components/angular-cookies/angular-cookies.js"></script> // new
<!-- endbower -->
<!-- endbuild -->

核心模块声明：

(function () {
  'use strict';

  angular
    .module('app.core', [
      'ngAnimate',
      'ngSanitize',
      'blocks.exception',
      'blocks.logger',
      'blocks.router',
      'ui.router',
      'firebase',
      'ngMap',
      'ngplus',
      'ngCookies', // new
    ]);

})();

缩小/丑化的 js 输出：

app.js

function(){"use strict";angular.module("app.core",["ngAnimate","ngSanitize","blocks.exception","blocks.logger","blocks.router","ui.router","firebase","ngMap","ngplus","ngCookies"])}(), ...

lib.js

t.module("ngCookies",["ng"]).provider("$cookies", ...

控制台输出：

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module app.core due to:
[$injector:modulerr] Failed to instantiate module ngCookies due to:
[$injector:nomod] Module 'ngCookies' 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.
http://errors.angularjs.org/1.5.9/$injector/nomod?p0=ngCookies

【问题讨论】：

始终确保，所有角度插件都应该有相同的角度版本，同样我可以说你应该有你所有的角度插件版本应该是1.5.8，因为我可以看到你有角度清理版本@ 987654331@ 不正确.. 我不确定我的建议是否对您有帮助，这是我这边的建议
@PankajParkar 谢谢，我不知道我是如何设法忽略这一点的，或者为什么它没有出现在开发模式下，但它现在似乎可以工作了。
如果你愿意，我可以添加它作为答案，也许它也可以帮助其他人。

标签： angularjs dependency-injection gulp bower angular-module

【解决方案1】：

正如我所见，您加载并绑定了不同版本的 Angular API。理想情况下，您应该参考具有相同版本的 Angular API 库。但在你的情况下，你有angular-animate 有1.4.8 版本，但其他角度API 有1.5.8 版本。这可能会发生内部冲突。

我建议您将所有 Angular API 版本都与 1.5.8 相同。这可以解决您的问题。

【讨论】：