1

!!Total beginner here!!

I have run into an error - chrome console gives me an error regarding:

 [$injector:modulerr]

The problem is that I have not installed angular-route.min.js which is what you're supposed to do in all angular versions after 1.2. My trouble began when I installed angular-route.min.js, put it in the same file as angular and my HTML files, referenced it in the code with <script src="angular-route.min.js"></script> but nothing happened.

I also put angular.module('app.js', ['ngRoute']); into my js file.

There are no typos in my code, I checked for those. On top of all that the console gives me an error saying angular-route.min.js was not found.

All help welcome, I have spent a long time googling but nothing came of it.

(function () { 'use strict'; angular.module('MSgApp', []); controller:('MsgController', MsgController); angular.module('app.js', ['ngRoute']); MsgController.$inject = ['$scope']; function MsgController($scope) { $scope.name = "Chris"; $scope.stateOfBeing = "hungry"; $scope.sayMessage = function () { return "chris likes to eat cookies"; }; $scope.feedChris = function () { $scope.stateOfBeing = "fed"; }; } })(); 
<!DOCTYPE html> <html ng-app='DIApp'> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> <script src="angular-route.min.js"></script> <script src="app.js"></script> <title>custom attributes</title> </head> <body> <div ng-app="app.js"></div> <h1>expressions and interpolation</h1> <div ng-controller='MsgController'> {{name}} has a message for you: <br> {{sayMessage()}} <div> <button ng-click="feedChris()">Feed chris</button> <br> <img ng-src="D:/stuff/coursera angular/chris_{{stateOfBeing}}.png"> </div> </div> </body> </html>

errorimg

Errors after unminified both angular and angular-route

errorimg2

errorimg3

Improve this question
7
  • I have included a screenshot of the console, need anything else just ask, I really wanna resolve this issue. Commented Jan 21, 2021 at 8:08
  • @FedericoBaù nope, position doesn't seem to matter. Commented Jan 21, 2021 at 15:56
  • I unminified both angular and angular-route, not much happened, I am now down to two errors, I'll edit the pictures into my question. The first error is in a file I do not even know exists and it complains about <!DOCTYPE html>, then there's the one that complains about the dot in front of .controller on the 5th line of my JS code. Commented Jan 22, 2021 at 16:56
  • ok, yes update with the 2 new errors you get. But If I understood means that you followed my answer correct? Now that error is different and you get a new one or you get 2 new? Ok i see now the pict, seems are 2 different and new. Maybe is good, going towards a solution Commented Jan 22, 2021 at 16:59
  • Ok, but I see that you have Unminified your self? so may be error prone. Did you try to use The CMD version like so: "ajax.googleapis.com/ajax/libs/angularjs/1.2.7/…"? Commented Jan 22, 2021 at 17:01

1 Answer 1

Reset to default
0

As per StackOverflow --> Angular JS Uncaught Error: [$injector:modulerr]:

EDIT: This is what ultimately solved the issue and what Chris B did to make it work :

I have come across another code in the Coursera course and this one seems to be working after putting the three links from the answer by @ulmer-morozov into the head tag instead of referencing files on my pc. I guess that's it,

From Answer of @ulmer-morozov:

In development environments I recommend you to use not minified distributives. And all errors become more informative! Instead of angular.min.js, use angular.js.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">

From Accepted Answer @Lauri Elias:

Try adding this:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>

From Answer of @Khanh TO:

Try adding:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">

and:

angular.module('MyApp', ['ngRoute','ngResource']); function TwitterCtrl($scope,$resource){ }

You should call angular.module only once with all dependencies because with your current code, you're creating a new MyApp module overwriting the previous one.

From angular documentation:

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.