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

Question

I'm having to downgrade AngularJS from 1.3 to 1.2.28 so that I can support IE8 (my client decided they needed to support it after we got started). 我不得不将AngularJS从1.3降级到1.2.28以便我可以支持IE8（我的客户决定他们在我们开始后需要支持它）。 The first step I took was to change all the references to AngularJS to 1.2.28 as such: 我采取的第一步是将所有对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>

Here is my setup in my app.module.js : 这是我的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.'
        });
    }
})();

Here is my app.routes.js file: 这是我的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'
            });
    }
})();

Here is my index.html 这是我的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>

I'm getting this error in Google Chrome and the page is completely blank: 我在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

Seems like you missed to load ui.bootstrap related files, you only loaded bootstrap.js 好像你错过了加载ui.bootstrap相关文件，你只加载了bootstrap.js

As you are using Angular 1.X you need to use 0.12.0 is the last version of this library that supports AngularJS 1.2.x. 当你使用Angular 1.X时，你需要使用0.12.0是这个支持AngularJS 1.2.x的库的最后一个版本。

Visit here Angular ui bootstrap and look for Getting Started Module. 访问Angular ui bootstrap并查找Getting Started Module。

Answer 2

Please dont use this directive 'ng-strict-di'. 请不要使用此指令'ng-strict-di'。 It is introduced in angular 1.3 .Here is the attached link for reference 它以角1.3引入。这里是附件链接供参考

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

Answer 3

Per @Pavel Horal's advice, I switched to non minimized angular and got the full error and it actually showed that I was missing a few modules, one of them being Angular UI Bootstrap as pankajparkar noted. 根据@Pavel Horal的建议，我切换到非最小化角度并得到了完整的错误，它实际上显示我缺少一些模块，其中一个是Angular UI Bootstrap，如pankajparkar所述。

There are still other issues with downgrading that I'm fighting through, but switching to non-minimized version has really helped find them all. 还有其他降级问题我正在努力解决，但转换到非最小化版本确实帮助找到了所有这些问题。

从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