CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjson
tholo
tholo

Reputation: 541

angular.js:38 Uncaught Error: [$injector:modulerr]

I keep getting this error:

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=sport1Feed&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A22%3A179)
    at angular.js:38
    at angular.js:4920
    at q (angular.js:403)
    at g (angular.js:4880)
    at eb (angular.js:4802)
    at c (angular.js:1914)
    at Sc (angular.js:1935)
    at ue (angular.js:1820)
    at angular.js:33367
    at HTMLDocument.b (angular.js:3431)

My app is defined and invoked in html, same as my controller. What am I doing wrong here?

app.js:

var app = angular.module('testApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap','ui.router']);

ctrl.js:

app.controller('feedCtrl', function($scope, $http) {
    $http.get('https://api.myjson.com/bins/13vg19').then(function(res) {
        $scope.res = res.data;
        console.log($scope.res);
    });
});

html:

<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="app.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="./components/app/app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.js"></script>
  <script src="./components/controller/ctrl.js"></script>
</head>
<body>

<div data-ng-controller="feedCtrl">

</div>

</body>
</html>

What exactly is an error here? I have tried placing ng-app in the body tags, same result. As you can see, app.js is invoked after the angular library.

Thanks.

EDIT: I have just noticed in the console, under Network that the request to the https://api.myjson.com/bins/13vg19 is not being invoked at all.

Upvotes: 1

Views: 4983

Answers (2)

SapManTM
SapManTM

Reputation: 136

This problem means angular could not inject modules to your app. The reasons for that might be that you didn't import them in the HTML or versions mismatch (for example import anguler version x and angular-animate version y). Generally speaking, in angular exceptions messages usually contain a link to angular's site which explains the problem better, in plain text.

As I see this, you imported you js file before you imported the necessary angular files, and you didn't imported at all angular-animate and ui.bootstrap.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222682

Load the app.js after loading all the dependencies references, your order should be

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.js"></script>
  <script src="./components/app/app.js"></script>
  <script src="./components/controller/ctrl.js"></script>

Upvotes: 6

Related Questions