The error message "app.js: Uncaught ReferenceError: angular is not defined" indicates

I've been searching diligently for a solution to this issue, but it appears to be quite unique in every instance. Perhaps fresh perspectives can help illuminate the problem.

An error message is appearing in my console:

app.js:23 Uncaught ReferenceError: angular is not defined

While my angular application is functioning properly, this error persists despite all attempts to fix it. I suspect the error arose when I restructured my code to align with a style guide authored by Todd Motto. Here is a snippet of my app.js:

(function() {

function config($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'partial/main'
        })
        .when('/assignment/:id', {
            templateUrl: 'partial/assignment',
            controller: 'SubmissionController'
        }).otherwise({
            redirectTo: '/'
        });
}
angular
    .module('myApp', ['ngRoute', 'ui.materialize', 'ngAnimate'])
    .config(config);

})();

The dependencies are listed below:

doctype html
html(ng-app="myApp")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0")

    title= title    

    link(rel='icon', type='image/png', href='favicon.ico')

    // bower:css
    link(rel='stylesheet', href='../bower_components/animate.css/animate.css')
    // endbower

    script(src='js/app.js') styles
    link(rel="stylesheet", href="css/app.css") 
    link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")

  body(ng-controller="AssignmentController")
    block content 

    //- lib js
    // bower:js
    script(src='../bower_components/jquery/dist/jquery.js')
    script(src='../bower_components/angular/angular.js')
    script(src='../bower_components/Materialize/bin/materialize.js')
    script(src='../bower_components/angular-route/angular-route.js')
    script(src='../bower_components/angular-animate/angular-animate.js')
    script(src='../bower_components/angular-materialize/src/angular-materialize.js')
    // endbower  

    //- app js 
    script(src='js/app.js')
    script(src='js/controllers.js')
    script(src='js/services.js')
    script(src='js/directives.js')        
    script(src='//localhost:35729/livereload.js')  

After several trials and errors, I have attempted removing each dependency individually. I have also experimented with changing the loading order of dependencies and the sequence of application-specific files, yet the issue persists.

Any thoughts or suggestions on how to resolve this?

Answer №1

Shoutout to @JJJ for the help!

"You're actually loading app.js twice in your code. The first time is in the head section before Angular has been loaded, which throws an error. The second time is in the body after Angular has loaded, making it run without errors:"

doctype html
html(ng-app="myApp")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0")

    title= title    

    link(rel='icon', type='image/png', href='favicon.ico')

    // bower:css
    link(rel='stylesheet', href='../bower_components/animate.css/animate.css')
    // endbower

    // - [FIX] removed: script(src='js/app.js')         
    link(rel="stylesheet", href="css/app.css") 
    link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")

  body(ng-controller="AssignmentController")
    block content 

    //- lib js
    // bower:js
    script(src='../bower_components/jquery/dist/jquery.js')
    script(src='../bower_components/angular/angular.js')
    script(src='../bower_components/Materialize/bin/materialize.js')
    script(src='../bower_components/angular-route/angular-route.js')
    script(src='../bower_components/angular-animate/angular-animate.js')
    script(src='../bower_components/angular-materialize/src/angular-materialize.js')
    // endbower  

    //- app js 
    script(src='js/app.js')
    script(src='js/controllers.js')
    script(src='js/services.js')
    script(src='js/directives.js')        
    script(src='//localhost:35729/livereload.js')  

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

Dispatch prop within useEffect

App.js -> <Lobbies inGame={inGame} setLobby={setLobby} userName={userName} userKey={userKey}/> Lobbies.js -> import React, { useState, useEffect } from 'react'; import firebase from 'firebase'; const Lobby = ({userKey, ...

The warning message is "UnhandledPromiseRejectionWarning: TypeError: Unable to access the 'forEach' property of an undefined object in

I'm having issues with my Discord song bot because I can't seem to implement a working loop using either 'for' or a forEach. Currently, I am focused on making the loop function correctly, and once that's achieved, I will work on di ...

Encountering the "test exited without ending" error while using asynchronous forEach loops with tape

My Current Project Edit: I created a repository with a simplified version of the issue I am facing. Currently, my focus is on setting up automated frontend testing using tools like browserstack, selenium-webdriver, and tape. More information about tape ...

Check for available usernames in real-time using Node.js and Express.js, along with client-side JavaScript

Currently, I am working on a web application using Express, MongoDB, and Handlebars as the templating engine. In this app, there is a form where users can create their unique usernames. I want to implement a feature where a tooltip pops up at intervals to ...

Create a jQuery AJAX call by setting up an HTTP request with specific headers and a request body

Is it possible to create a Jquery request using $.ajax or $.post and include the following information: POST /CreateSpeech HTTP/1.1 Host: tts.eu-west-1.ivonacloud.com Content-type: application/json X-Amz-Date: 20130913T092054Z Authorization: AWS4-HM ...

angular js sorting JSON objects by ID

I am having trouble sorting and displaying data with AngularJS. I have added a sort option to my table, but it does not seem to be working properly. Could you please review my JSON data? [ { "id":143, "companyName":"XC", "dividendIn ...

Is it possible to merge createStackNavigator with createBottomTabNavigator for enhanced navigation functionality

Current Situation : My app currently has three tabs for navigation (School, Admin, Family); I am now facing a challenge as I want to add additional screens that do not require tabs for navigation. These screens will be accessed using this.props.navigati ...

Is it possible to invoke a Java function from a text box on an HTML page?

For a web project using JSP, MySQL, AJAX with Netbeans and MySQL, I have three textboxes. Two textboxes are for user input, and the third should display the product of the two input values. How can I achieve this? Should I make an AJAX call or can I call ...

Creating a TypeScript rule/config to trigger an error when a React Functional Component does not return JSX

I've encountered a recurring issue where I forget to include a return statement when rendering JSX in a functional component. Here's an example of the mistake: const Greetings = function Greetings({name}) { <div>Greetings {name}</div& ...

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

What is the best way to perform a multi-link latency check, display the ping results, and use JavaScript to determine the fastest URL?

click here for image description I have noticed that many websites offer this feature, making it easier for users to choose the best URL or server based on their location. As a JavaScript novice, I'm wondering if someone could demonstrate how this is ...

The drag and drop feature (jqyoui-droppable) seems to be malfunctioning in AngularJS

I am looking to create a unique way to complete a sentence by filling in the missing words with draggable options. An example string could be: The ______ brown ______ jumps over the ______ dog. with words like: quick, fox, lazy However, I have encount ...

Converting an array of strings to integers using Highcharts and JavaScript

Trying to create a chart using highcharts involves getting data from a datatable in VB.NET, converting it into an array, then transforming it into JSON before passing it back to JavaScript for rendering. However, the data is not appearing on the chart, pos ...

Prevent scrolling within input field

I have a text entry field with background images that separate each letter into its own box. Unfortunately, an issue arises when I reach the end of the input: the view automatically scrolls down because the cursor is positioned after the last letter enter ...

What is the process for resizing a texture render target following a window resize event?

My intention was to improve the texture quality, but instead of achieving my goal, I encountered an issue where the same texture is being stretched over a larger area, resulting in unwanted staircase artifacts. I tried updating various elements like camera ...

npm not working to install packages from the package.json file in the project

When using my macbook air, I encounter an issue where I can only install npm packages globally with sudo. If I try to install a local package without the -g flag in a specific directory, it results in errors. npm ERR! Error: EACCES, open '/Users/mma ...

What is causing the slow performance of this JavaScript array retrieval?

I am working with a large array called frames_to_boxes, consisting of 5000 elements. Each element is an array of Objects belonging to the Box class: class Box { constructor(x, y, width, height, frame, object_class, id) { this.x = x; this.y = y; ...

Using Satellizer.js to log off

Can anyone help me solve a problem I'm facing? I am currently using Satellizer for logins, and I have successfully logged in with Google, obtained a token, but when I try to sign out, the token is deleted but I remain signed in on Google. For example, ...

Utilize PHP server to serve index.html for all routes with the combination of React and react-router-dom

Usually, I develop websites using a combination of reactjs, node, and express, then deploy them to Heroku. Everything works smoothly with this setup. However, I recently received a request to create a reactjs frontend with a PHP backend and deploy it to c ...

Managing JavaScript Code within the <Head> Tag Following ASP.Net Postback

I've encountered an issue with maintaining my code on postback. Despite having jQuery code in the Head section that functions properly initially, it stops working when a postback occurs! Is there a way to address this problem? Does the head section n ...