Clever Geek Handbook

Migrating to AngularJS 1.2.28 from 1.3.x Error: $ injector: modulerr

I need 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 started). The first step I took was to change all AngularJS links to 1.2.28 as such:

<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 .module.js application:

(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:

(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

<!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 am getting this error on Google Chrome and the page is completely blank:

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
+3


source to share


3 answers


It looks like you missed downloading ui.bootstrap

related files, you only downloadedbootstrap.js

Since you are using Angular 1.X you need to use 0.12.0, which is the latest version of this library which supports AngularJS 1.2.x.



Visit Angular ui bootstrap and find the Getting Started module.

+1


source


Please do not use this "ng-strict-di" directive. It is introduced in angular 1.3. Here is the link for reference



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

0


source


In @Pavel Horal's advice, I switched to non-minified angular and got a complete error and it actually showed that I was missing a few modules, one of which is the angular UI Bootstrap as pankayparkar noted.

There are still other downgrade issues that I'm struggling with, but switching to the non-minimized version really helped find them all.

0


source






More articles:


All Articles