The function cannot be applied to d[h] due to a TypeError

Having some trouble with my code here. I'm trying to set up routes to display a gif using CSS animation when the page is loading. The gif shows up initially, but then everything fades out and the gif remains on the page. Additionally, I'm getting a "TypeError: d[h].apply is not a function" error in the console. Any assistance would be greatly appreciated. Here's the code snippet:

HTML:

<!DOCTYPE html>
<html lang="en" ng-app="OWMApp">
<head>
    <meta charset="UTF-8">
    <title>Open Weather Map App</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="app/owm-app.css">
</head>
<body ng-class="{loading: isLoading}">
    <div class="container">
        <a href="#/">Home</a>
        <a href="#/cities/New York">New York</a>
        <a href="#/cities/Dallas">Dallas</a>
        <a href="#/cities/Chicago">Chicago</a>
        <a href="#/cities/NotOnList">Unsupported city</a>
        <div class="animate-view-container">
            <div ng-view class="animate-view"></div>
        </div>
        <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
        <script type="text/javascript" src="app/owm-app.js"></script>
    </div>
</body>
</html>

CSS:

body, html { position: relative; min-height: 100%;}
.loading {
    position: relative;
    height: 100%;
}
.loading:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9) no-repeat center center;
    background-image: url('./loading-animation.gif');
}
.animate-view-container { position: relative; min-height: 100%; }
.animate-view.ng-enter,
    .animate-view.ng-leave {
        transition: 1s linear all;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #eee;
    }
.animate-view.ng-enter { opacity: 0; z-index:100; }
.animate-view.ng-enter.ng-enter-active { opacity: 1; }
.animate-view.ng-leave { opacity: 1; z-index: 99; }
.animate-view.ng-leave.ng-leave-active { opacity: 0; }

JS:

angular.module('OWMApp', ['ngRoute', 'ngAnimate'])
    .value('owmCities', ['New York', 'Dallas', 'Chicago'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider.when('/', {
            templateUrl: 'home.html',
            controller: 'HomeCtrl'
        })
        .when('/cities/:city', {
            templateUrl: 'city.html',
            controller: 'CityCtrl',
            resolve: {
                city: function(owmCities, $route, $location) {
                    var city = $route.current.params.city;
                    if(owmCities.indexOf(city) == -1){
                        $location.path('/error');
                        return;
                    }
                    return city;
                }
            }
        })
        .when('/error', {
            template: '<p>Error - Page Not Found</p>'
        });
    }])
    .controller('HomeCtrl', ['$scope', function($scope){

    }])
    .controller('CityCtrl', function($scope, city){
        $scope.city = city;
    })
    .run(function($rootScope, $location){
        $rootScope.$on('$routeChangeError', function(){
            $loaction.path('/error');
        });
        $rootScope.$on('$routeChangeStart', function(){
            $rootScope.isLoading = true;
        });
        $rootScope.$on('$routeChangeSuccess', ['$timeout', function(){
            $timeout(function(){
                $rootScope.isLoading = false;
            }, 1000);
        }]);
    });

Answer №1

The mistake can be found in this section:

$rootScope.$on('$routeChangeSuccess', ['$timeout', function(){
    $timeout(function(){
        $rootScope.isLoading = false;
    }, 1000);
}]);

Simply remove the array containing $timeout and keep only the function as the second argument for $on.

$rootScope.$on('$routeChangeSuccess', function(){ ...

Make sure to inject dependencies in the following way (similarly to other dependencies):

.run(function($rootScope, $location, $timeout){ ...

For more information, refer to the documentation: https://docs.angularjs.org/api/ng/type/$rootScope.Scope

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

Having trouble capturing the 'notificationclick' event in the service worker when using Firebase messaging with Nuxt.js and Vue.js?

Experiencing difficulties in detecting events other than install, activate, or push in my firebase-messaging-sw.js. Notifications are being received and displayed, but I am unable to detect the event handler for notificationclick. When a firebase notificat ...

Changing the state of a form field to "dirty" using Angular.js programmatically

When updating fields on my form programmatically with a value, I want to set the field state to $dirty. However, trying $scope.myForm.username.$dirty = true; doesn't seem to have any effect. I noticed that there is a $setPristine method available to ...

What is the best way to refresh my Material-UI checkboxes following updates to certain states in a React JS environment?

One of my latest projects involves an application that visualizes graphs, with all nodes originally colored blue. I included a component in the form of a checkbox that users can interact with to trigger a state change. This change dynamically alters the co ...

Display a complex JSON string in an ng-grid

My web service is designed to generate a JSON string using the following code: JavaScriptSerializer j = new JavaScriptSerializer(); return "[" + string.Join(",", v.getProbingJobs().Select(a => j.Serialize(a)).ToArray()) + "]"; (The getProbingJobs func ...

Having difficulty invoking a JavaScript function at a global level

Currently, I am working on a nodejs application that involves mongoDB integration. In my code, I have created a function to extract specific data from MongoDB and save it in a variable called "docs". Despite multiple attempts to declare the function global ...

How can I eliminate padding from events in FullCalendar's timeGrid view?

Is there a way to remove the padding from an event when the calendar is in 'timegridview'? Users are taking advantage of the empty space created, allowing them to bypass a blocked time slot. I currently have it set so that clicking on an event d ...

Using AngularJS Material's mdDialog to show locally stored data in a template

In the controller, the section responsible for spawning mdDialog appears as follows: $scope.removeAttendee = function(item) { console.log(item); $mdDialog.show({ controller: DialogController, templateUrl: 'views/removeMsg.tm ...

Leveraging Selenium to dismiss a browser pop-up

While scraping data from Investing.com, I encountered a pop-up on the website. Despite searching for a clickable button within the elements, I couldn't locate anything suitable. On the element page, all I could find related to the 'X' to cl ...

Panel with Bootstrap Collapse feature causes a slight movement when padding is applied

After applying the collapse behavior to a panel element, I noticed that the animation stops abruptly at the padding of .panel-body, causing it to snap instantly to height. This issue can be observed in the basic example on codepen: http://codepen.io/FiveSi ...

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down. The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Desp ...

Function in Node.js/JavaScript that generates a new path by taking into account the original filepath, basepath, and desired destination path

Is there a custom function in Node.js that takes three arguments - filePath, basePath, and destPath - and returns a new path? For example: Function Signature Example var path = require('path'); // Could the `path` module in Node be useful here? ...

Javascript: Uncaught TypeError - Unable to assign value to non-existent property

I am having an issue with assigning a value to a textbox, and I keep getting this error. Here is my code: This is the textbox in question: <input id="Text1" type="text" runat="server"/> Here is the dropdown list used in the function: <select i ...

How can I customize the styling of Autocomplete chips in MUI ReactJS?

Trying to customize the color of the MUI Autocomplete component based on specific conditions, but struggling to find a solution. Any ideas? https://i.stack.imgur.com/50Ppk.png ...

Exploring the use of global variables in React

Welcome to my React learning journey! I've encountered an issue while trying to access a global variable exposed by a browser extension that I'm using. Initially, I attempted to check for the availability of the variable in the componentDidMount ...

Acquiring POST parameters within Laravel's Controller from JavaScript or Vue transmission

I am trying to send Form data from a Vue component to a Laravel API using the POST method. Although Laravel is returning a successful response, I am encountering difficulty in handling the POST data within the Laravel controller. Below is the code for th ...

Implementing a queue with an on-click event

As a self-proclaimed Java nerd diving into the world of jQuery, I'm facing some challenges. My goal is to create 3 interactive boxes that behave in a specific way: when clicked, one box should come forward while the other two dim and stay in the back ...

What is the best method for removing table rows with a specific class?

I have an html table with several rows, and for some of these rows the class someClass is applied. My question is: How can I delete the rows that have a specific class? <table> <tr class="someClass"> ...</tr> <tr class="someClass"> ...

Different ways to showcase the local time zone

Currently, I am utilizing datetimepicker.js. The code snippet that I am using is shown below: Partial HTML: <div ng-hide="editingData[x.date]">{{x.date|date}} </div> This results in the following date format: May 21, 2015 2:52:29 PM Desir ...

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...