An unexpected error occurred: Angular is still not functioning correctly even though ng-route has been

Help! I'm encountering this dreaded error message:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module usersApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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.

I can't figure out what's wrong with my code in app.js:

(function () {

    var app = angular.module('usersApp',
        ['ngRoute']);

    app.config(['$routeProvider', function ($routeProvider) {

      var viewBase = '/';

        $routeProvider
            .when('/users', {
                controller: 'MainController',
                templateUrl: viewBase + 'users/users.html',
                controllerAs: 'vm'
            })
            .when('/add', {
                controller: 'OrdersController',
                templateUrl: viewBase + 'add/orders.html'
            })
            .otherwise({ redirectTo: '/users' });

    }]);


}());

This is how my index.html looks like:

<html>
  <head>
    <title>My Angular App!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

    <script src="app.js"></script>
  </head>
  <body ng-app="usersApp" ng-controller="MainCtrl">
  <h1>uSers</h1>
    <div ng-repeat="user in users" ng-click="getUsers()" style="background: black; padding: 5px; min-width: 25px; color: white;">
    {{user}}
    </div>
  </body>
</html>

Any help or advice is greatly appreciated!

Answer №1

It seems like you overlooked adding angular-route to your code. Moreover, loading two different versions of Angular is unnecessary. Consider updating your main HTML file as shown below:

<html>
  <head>
    <title>My Angular App!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>

    <script src="app.js"></script>
  </head>
  <body ng-app="usersApp" ng-controller="MainCtrl">
  <h1>uSers</h1>
    <div ng-repeat="user in users" ng-click="getUsers()" style="background: black; padding: 5px; min-width: 25px; color: white;">
    {{user}}
    </div>
  </body>
</html>

Answer №2

Don't forget to add angular.route.js to your index.html file

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Parsing query parameters in Express using the "+" symbol

I am running an Express server and have set up the following configuration in my routes: app.use(express.urlencoded({ extended: false })); On the frontend, I am making a request using Angular: let params = new HttpParams().set('info', info); i ...

Ways to retrieve the <select> value in AngularJS

Having trouble passing the selected value from my tab to my $scope object. Here's the snippet of my HTML code. <div ng-controller="RouteController"> <select ng-model="selector" ng-options="opt as opt.label for opt in options"> ...

Tips for emphasizing a specific cell in a row based on its expiration date

In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...

Acquire JSON data from a URL and display it on the webpage

I'm facing an issue where the JSON data I'm trying to fetch from a URL is not displaying due to an uncaught reference error in my code. How can I modify the code to ensure that the data gets shown? var url = "https://fantasy.premierleague.com/ ...

Changing the content of a DOM element containing nested elements using JavaScript/jQuery

Need some help with a DOM element that looks like this: <span>text</span> <b>some more text</b> even more text here <div>maybe some text here</div> How can I replace text with candy to achieve this result: <span> ...

Unexpected issue encountered when working with JSON in Node.js

I've searched through countless solutions on stackoverflow, but none of them seem to work for me. It's really frustrating not understanding what's going wrong. Below is the code I'm having trouble with: var data = ""; req.on('dat ...

Angular logs the HTTP error before it is processed

When a user clicks on a button on a simple login form, a mechanism is triggered. This mechanism involves sending a POST request to a REST service with the user's provided credentials. If the credentials are correct, the success function is executed, o ...

Eliminate unnecessary words from the sentence

I wrote a sentence but it got split at every space. The data is displayed like this: const escapeRE = new RegExp(/([/\?""])/g); const myDatas = data.map(des => des.Sentence.toLowerCase().replace(escapeRE, '').split(' ')); [ [ ...

When an external image is dragged over, include the class in the drop area of the file input

Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area? Here's the HTML code I'm working with: <div class="upload"> <form action=""> <input class="uploadfile" type="file" ...

What is the best way to adjust the screen to display the toggle element when it is opened?

Here is the code I'm currently using to create a toggle button that shows or hides extra content when clicked: $(".toggle .button").click(function() { $(this).next().slideToggle('fast'); }); The issue I am encountering is that if t ...

Angular tutorial on splitting a JSON array

I am looking to extract a portion of a JSON array in Angular. The array looks like the one in the image below.https://i.stack.imgur.com/w0hqC.png Below is the code snippet: export class AppComponent { color: string = 'green'; public stocklis ...

Managing file responses in Node.js

Hey there! I've been working on implementing ajax image upload and here's how far I've gotten. This is my index.html: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <title>File Upload ...

Discovering the maximum value and fetching it from an array

Can you help me identify the array element with the highest 'conversion' value? var barTextData = [ { term: "Roof", clicks: 11235, conversion: 3.12 }, { term: "Snow", clicks: 6309, conversion: 4.45 }, { term: "Chains" ...

A guide to retrieving the contents of an input field based on its assigned value and name attributes through Javascript

Can anyone help me with selecting an input element in my HTML code? Here is the input I want to select: <input id="tb-radio-gym_custom_radio-10ce67e3" type="radio" value="OUI" name="form_fields[gym_custom_radio]" data-price-inc="0" checked="checked"> ...

Having difficulty fetching the object from mongodb for the parent function

I have a mongo collection object that I need to access outside of its function scope. This is my current approach: function getOldMessage(user) { //this is where i want to store the object var oldMsg = {}; messagedb.findOne({ "room": user.room }, functio ...

Issue with Charts.js: The defined moment is missing when using chart.bundle.min.js

I successfully created a chart with charts.js and configured it, but now I aim to make the X Axis represent time. However, when attempting to implement this using the code below, I encounter the following console error: Uncaught ReferenceError: moment is n ...

Is it permissible to assign the same element as a child to multiple parent elements in jQuery?

Imagine you have the following HTML structure: <div id="first"></div> <div id="second"></div> Now, if you use JavaScript and JQuery to perform the following actions: var $child = $("<span id='child'>Hello</span ...

remove a row from a table within a Firestore database

I'm currently working on implementing a button to delete a specific row in my table from the Firebase database, but I'm uncertain about how to achieve this using a button function. My code is written in JavaScript and utilizes Firestore. Below i ...

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

Utilizing AJAX, I fetched a JSON response and am now looking to map the JSON data into an HTML table structured like this: { "records": [{ "type_id": 000001, "type_desc": "AAAAAA", "type_createby": "Adam" }, { "type ...

Tips for customizing the WooCommerce product page

If you want to customize the layout of a WooCommerce product page, you can override the template by copying the WooCommerce template folder into your theme. You can find step-by-step instructions here. I am looking to change the layout of a WooCommerce pr ...