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

Question

我不得不将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

Answer 1

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

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

访问Angular ui bootstrap并查找Getting Started Module。

Answer 2

请不要使用此指令'ng-strict-di'。 它以角1.3引入。这里是附件链接供参考

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

Answer 3

根据@Pavel Horal的建议，我切换到非最小化角度并得到了完整的错误，它实际上显示我缺少一些模块，其中一个是Angular UI Bootstrap，如pankajparkar所述。

还有其他降级问题我正在努力解决，但转换到非最小化版本确实帮助找到了所有这些问题。

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

问题描述

3 个解决方案

解决方案1
1 2015-06-22 19:22:25

解决方案2
0 2015-06-22 19:03:35

解决方案3
0 2015-06-23 19:10:47

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

问题描述

3 个解决方案

解决方案1 1 2015-06-22 19:22:25

解决方案2 0 2015-06-22 19:03:35

解决方案3 0 2015-06-23 19:10:47

解决方案1
1 2015-06-22 19:22:25

解决方案2
0 2015-06-22 19:03:35

解决方案3
0 2015-06-23 19:10:47