从 1.3.x 降级到 AngularJS 1.2.28 错误：$injector:modulerr答案

【问题标题】：Downgrading to AngularJS 1.2.28 from 1.3.x Error: $injector:modulerr从 1.3.x 降级到 AngularJS 1.2.28 错误：$injector:modulerr
【发布时间】：2015-09-08 08:18:06
【问题描述】：

我不得不将 AngularJS 从 1.3 降级到 1.2.28，这样我才能支持 IE8（我的客户决定在我们开始之后他们需要支持它）。我采取的第一步是将所有对 AngularJS 的引用更改为 1.2.28：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

这是我在 app.module.js 中的设置：

(function () {
    'use strict';

    angular
        .module('mn', [
            'ngRoute',
            'angularSpinner',
            'angular-cache',
            'ngSanitize',
            'ui.bootstrap',
            'mn.catalog',
            'mn.common',            
        ])
    .run(CacheSetup);

    CacheSetup.$inject = ['CacheFactory'];

    /** @ngInject */
    function CacheSetup(CacheFactory) {
        CacheFactory.createCache('profileCache', {
            maxAge: 30 * 60 * 1000, //30 min
            deleteOnExpire: 'aggressive',
            storageMode: 'sessionStorage',
            storagePrefix: 'si-cache.caches.'
        });

        CacheFactory.createCache('ransCache', {
            maxAge: 30 * 60 * 1000, //30 min
            deleteOnExpire: 'aggressive',
            storageMode: 'sessionStorage',
            storagePrefix: 'si-cache.caches.'
        });
    }
})();

这是我的 app.routes.js 文件：

(function () {
    'use strict';

    angular
        .module('mn')
        .config(config);

    config.$inject = ['$routeProvider'];

    /** @ngInject */
    function config($routeProvider) {
        $routeProvider.
            when("/AccountSettings", {
                templateUrl: "/angularRoot/modules/accountSettings/login.html",
                controller: 'AccountSettingsController as vm',
                caseInsensitiveMatch: true
            })
            .otherwise({
                redirectTo: '/welcome'
            });
    }
})();

这是我的 index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

    <title>Page Title</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-resource.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-loader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-cookies.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-touch.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <script src="angularRoot/externalReference/spin.min.js"></script>
    <script src="angularRoot/externalReference/vendor/jquery.main.js"></script>
    <script src="angularRoot/externalReference/d3.min.js"></script>
    <script src="angularRoot/externalReference/linq.min.js"></script>
    <script src="angularRoot/externalReference/respond.min.js"></script>

    <script src="angularRoot/core/app.module.js"></script>
    <script src="angularRoot/core/app.routes.js"></script>

    <script src="angularRoot/modules/accountActivity/accountActivity.module.js"></script>
    <script  src="angularRoot/modules/accountActivity/accountActivity.controller.js">   </script>

    <link href="css/3rdParty/bootstrap.css" rel="stylesheet" />
    <link href="css/vendorStyles.css" rel="stylesheet" />
    <link href="css/Styles.css" rel="stylesheet" />

</head>

<body ng-app='mn' ng-strict-di>

    <div id="wrapper" ng-view>
    </div>

    <!--[if lt IE 7]>
         <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to    improve your experience.</p>
    <![endif]-->

</body>
</html>

我在 Google Chrome 中收到此错误，页面完全空白：

Failed to instantiate module mn due to:
Error: [$injector:modulerr]       http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=...)
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:6:450
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:34:97
at r (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:7:290)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:33:207)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:33:284
at r (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:7:290)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:33:207)
at ec (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:36:309)
at c (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js:18:170

【问题讨论】：

不要使用缩小版的 Angular 进行开发。然后你会得到更有意义的错误信息。
您不能使用function MyCtrl 语法声明控制器。
堆栈跟踪中的完整错误链接是什么。它会让我们为你挖掘。
@alisabzevari 请不要给用户错误的信息..你需要看看这个sravi-kiran.blogspot.in/2013/11/…

标签： javascript angularjs angularjs-scope angularjs-service

【解决方案1】：

请不要使用这个指令'ng-strict-di'。它在 Angular 1.3 中引入。这里附上链接供参考

http://bartwullems.blogspot.in/2014/10/angularjs-13-ng-strict-di-directive.html

【讨论】：

【解决方案2】：

好像你错过了加载ui.bootstrap相关文件，你只加载了bootstrap.js

当您使用 Angular 1.X 时，您需要使用 0.12.0 是该库支持 AngularJS 1.2.x 的最后一个版本。

访问此处Angular ui bootstrap 并查找入门模块。

【讨论】：

【解决方案3】：

根据@Pavel Horal 的建议，我切换到非最小化角度并得到完整的错误，它实际上表明我缺少一些模块，其中一个是 Angular UI Bootstrap，正如 pankajparkar 指出的那样。

我还在努力解决其他降级问题，但切换到非最小化版本确实有助于找到所有问题。

【讨论】：