Angularjs Uncaught Error: [$Injector:Modulerr] When Migrating to V1.3

Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3

After AngularJS version 1.3 global controller function declaration is disabled

You need to first create an AngularJS module & then attach all the components to that specific module.

CODE

function Ctrl($scope) {
    $scope.age = 24;
}

angular.module('app', [])
    .controller('Ctrl', ['$scope', Ctrl]);

Specifically for your case, there is some issue with AngularJS 1.3.14 (downgrade it to 1.3.13 works fine). Though I'd prefer you to use angular 1.2.27 AngularJS 1.6.X, Which is more stable version & latest release of AngularJS.

Working Plunkr

UPDATE:

You could do your current code to working state by allow global controller declaration inside angular.config. But this isn't the correct way to run angular application.

function Ctrl($scope) {
    $scope.age = 24;
}

angular.module('app', [])
    .config(['$controllerProvider',
        function ($controllerProvider) {
            $controllerProvider.allowGlobals();
        }
    ]);

Uncaught Error: [$injector:modulerr] in angular js

Working Plnkr

Change $routerProvider to $routeProvider. Replace , with . in config. For example:

when('/about',{template:'templates/about.html'}),
when('/careers',{template:'templates/careers.html'})

to

when('/about',{template:'templates/about.html'})
.when('/careers',{template:'templates/careers.html'})

Your JavaScript code should look like this:

var website = angular.module('website',['ngRoute','ngResource']);

     website.config(function($routeProvider){
        $routeProvider.
            when('/about',{template:'templates/about.html'})
            .when('/careers',{template:'templates/careers.html'})
            .when('/signup',{template:'templates/signup.html'})
            .otherwise({redirectTo : '/home', template:'/home.html'})
    }) 

website.controller('mainController', function($scope){

});

For more information, please have a look at this example.

Hope that solve your problem.

Uncaught Error: $injector:modulerr; works locally but not on server

It's probably a problem of js minification, ref https://docs.angularjs.org/guide/di#implicit-annotation

Try the following, note the ['$routeProvider...:

replace your code with this

(function () {

  "use strict";

angular.module("app", ["ngRoute", "ngSanitize"])
    .config(['$routeProvider', function ($routeProvider) {
        //$location.path('/questionnaire'); //logged in already, session still active

  $routeProvider.when("/", {
    controller: "loginController",
    controllerAs: "vm",
    templateUrl: "views/login.php"
  });

  $routeProvider.when("/questionnaire/", {
    controller: "questionnaireController",
    controllerAs: "vm",
    templateUrl: "views/questionnaire.php"
  });

  $routeProvider.when("/questionnaire/:survey", {
    controller: "questionnaireController",
    controllerAs: "vm",
    templateUrl: "views/questionnaire.php"
  });

  $routeProvider.when("/study/:studyid", {
    controller: "studyController",
    controllerAs: "vm",
    templateUrl: "views/study.php"
  });

  $routeProvider.when("/result/", {
    controller: "resultController",
    controllerAs: "vm",
    templateUrl: "views/result.php"
  });

  $routeProvider.otherwise({ redirectTo: "/" });

}]);

})();

Uncaught Error: Module 'myApp' is not available! (AngularJS)

Module 'myApp' 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.

Your original issue is due to the invalid script tag. Basically your script tag is not closed it needs to be closed in order for the browser to download the app.js file. Script tags are not self closing so it needs a closing tag.

<script src="app.js">

should be

<script src="app.js"></script>

Now once you fix that you will get into another error.

[ng:areq] Argument 'MainController' is not a function, got undefined

Since you are using the latest angular version, i.e anything >= 1.3.x needs the controller to be registered manually using the .controller construct. See here for more details.

Note - it is a bit confusing because the screenshot shows you using 1.2.0 (which does not necessarily needs explicit controller registration) but snippet in the question shown 1.4.x.

Angular ng-controller not working

You need to register the controller in your angular app.

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Tutorial 2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script type="text/javascript">        
        var DummyCtrl = function ($scope){
            $scope.data = {message: "test123"};
        }
        angular.module('app', [])
        .controller('DummyCtrl', DummyCtrl);
    </script>
</head>
<body>
<div ng-app="app">
    <div ng-controller="DummyCtrl">
        <!--<input type="text" ng-model="test.sfdc"/>-->
        <h1>{{data.message}}</h1>
    </div>
</div>
</body>
</html>

Angular JS 1.5.X shows errors with controller

With Angular above 1.3 you need to defined controller like this,

 app.controller("MyController" , function($scope)
   {
       $scope.author = {
      'name' : 'Ray Villalobos',
      'title' : 'Staff Author',
      'company' : 'Lynda.com'
      }
   }); 

DEMO APP

---

Related Topics