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

Federico Baù
  • 6,013
  • 5
  • 30
  • 38
Chris Topher
  • 13
  • 8
  • I have included a screenshot of the console, need anything else just ask, I really wanna resolve this issue. – Chris Topher Jan 21 '21 at 08:08
  • @FedericoBaù nope, position doesn't seem to matter. – Chris Topher Jan 21 '21 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 , then there's the one that complains about the dot in front of .controller on the 5th line of my JS code. – Chris Topher Jan 22 '21 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 – Federico Baù Jan 22 '21 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: "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"? – Federico Baù Jan 22 '21 at 17:01
  • 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, I'll just use these links instead from now on, thanks, bro @ Federico Baù. – Chris Topher Jan 23 '21 at 11:50
  • That's awesome, I was thinkig to start a [bounty](https://stackoverflow.com/help/bounty) but hopefully it's solved :) I added your comment in the answer its self so that will help other people in the future ;) – Federico Baù Jan 23 '21 at 12:50

1 Answers1

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.

Federico Baù
  • 6,013
  • 5
  • 30
  • 38