Issue: window.XMLhttpRequest is not a valid constructor within Angular framework

Whenever I attempt to retrieve data using $http.get, an error occurs. Upon investigation, I discovered that the root cause of this error is the absence of window.XMLhttpRequest within angular.js line 11520.

    Error: window.XMLhttpRequest is not a constructor
    createXhr@https://localhost:61452/scripts/angular.js:11520:14
    createhttpBackend/<@https://localhost:61452/scripts/angular.js:11568:17
    sendReq@https://localhost:61452/scripts/angular.js:11423:9
    $http/serverRequest@https://localhost:61452/scripts/angular.js:11133:16
    processQueue@https://localhost:61452/scripts/angular.js:15758:28
    scheduleProcessQueue/<@https://localhost:61452/scripts/angular.js:15774:27
    $RootScopeProvider/this.$get</Scope.prototype.$eval@https://localhost:61452/scripts/angular.js:17026:16
    $RootScopeProvider/this.$get</Scope.prototype.$digest@https://localhost:61452/scripts/angular.js:16842:15
    $RootScopeProvider/this.$get</Scope.prototype.$apply@https://localhost:61452/scripts/angular.js:17134:13
    bootstrapApply@https://localhost:61452/scripts/angular.js:1713:9
    invoke@https://localhost:61452/scripts/angular.js:4625:16
    bootstrap/doBootstrap@https://localhost:61452/scripts/angular.js:1711:5
    bootstrap@https://localhost:61452/scripts/angular.js:1731:12
    @https://localhost:61452/App/app.js:318:5
    newContext/context.execCb@https://localhost:61452/scripts/require.js:1693:24
    newContext/Module.prototype.check@https://localhost:61452/scripts/require.js:881:43
    newContext/Module.prototype.enable@https://localhost:61452/scripts/require.js:1173:17
    newContext/Module.prototype.init@https://localhost:61452/scripts/require.js:786:21
    callGetModule@https://localhost:61452/scripts/require.js:1200:17
    newContext/context.completeLoad@https://localhost:61452/scripts/require.js:1587:21
    newContext/context.onScriptLoad@https://localhost:61452/scripts/require.js:1714:21

I have implemented require js for loading dependencies.

require.config({
    paths: {
        'angular': '/scripts/angular',
        'angular-ui-router': '/scripts/angular-ui-router.min',
        'bootstap': '/scripts/bootstrap.min',
        'jqueryDropDownStyle': '/scripts/custom/jquery.ddslick.min',
        'ddsclickFunctions': '/scripts/custom/ddsclickFunctions',
        'timerFunctions': '/scripts/custom/Timer',
        'chatWidgetSettingsFunc':'/scripts/custom/chatWidgetSettingsFunc',
        'angular-resource': '/scripts/angular-resource.min',
        'jquery.flagstrap': '../../scripts/jquery.flagstrap',
        'angular-sanitize': '/scripts/angular-sanitize.min',
        'angular-cookies': '/scripts/angular-cookies.min',
        'angular-locale_en': '/scripts/i18n/angular-locale_en',
        'angular-locale_ar': '/scripts/i18n/angular-locale_ar',
        'jquery': '/scripts/jquery-1.12.3.min',
        'jquery-ui': '/scripts/jquery-ui-1.11.4',
        'bootstrap-color': '/scripts/custom/bootstrap-colorpicker',
        'ui-bootstrap-tpls': '/scripts/angular-ui/ui-bootstrap-tpls',
        'ui-bootstrap': '/scripts/angular-ui/ui-bootstrap',
        'ngAnimate': '/scripts/angular-animate',
        'icolorPicker': '/scripts/custom/iColorPicker',
        'signalr': '/scripts/jquery.signalR-2.2.0.min',
        'hubs': '/signalr/hubs?',
        'directives': '/App/common/directives',
        'servicers': '/App/common/servicers',
        'api': 'https://www.google.com/recaptcha/api',
        'react': 'react-15.0.2',
        'reactDom': 'react-dom-15.0.2',
        'moment': '/scripts/moment',
        'momentData': '/scripts/moment-timezone-with-data',
        'editor': '/scripts/editor',
        'ckeditor':'/Content/plugins/ckeditor/ckeditor',
        'config': '/App/config',
        'app': '/App/app'
    },

    shim: {

        'angular': {
            deps: ['jquery']
        },
        'angular-ui-router': {
            deps: ['angular']
        },
        'angular-resource': {
            deps: ['angular']
        },
        'jquery.flagstrap': {
            deps: ['jquery']
        },
        'jquery-ui':{
            deps: ['jquery'],
        },
        'bootstap': {
            deps: ['jquery']
        },
        'angular-sanitize': {
            deps: ['angular']
        },
        'angular-cookies': {
            deps: ['angular']
        },
        'angular-locale_en': {
            deps: ['angular']
        },
        'angular-locale_ar': {
            deps: ['angular']
        },
        'ui-bootstrap': {
            deps: ['bootstap', 'angular']
        },
        'signalr': {
            deps: ['jquery'],
            exports: "$.connection"
        },
        'hubs': {
            deps: ['signalr']
        },
        'bootstrap-color': {
            deps: ['bootstap']
        },
        'jqueryDropDownStyle': {
            deps: ['jquery']
        },
        'chatWidgetSettingsFunc': {
            deps: ['angular','jquery']
        },
        'timerFunctions': {
            deps: ['jquery']
        },        
        'editor': {
            deps: ['jquery', 'bootstap']
        },
        'ddsclickFunctions': {
            deps: ['jquery']
        },        
        'icolorPicker': {
            deps: ['jquery']
        },
        'directives': {
            deps: ['angular']
        },
        'servicers': {
            deps: ['angular']
        },
        'ngAnimate': {
            deps: ['angular']
        },
        'ui-bootstrap-tpls': {
            deps: ['bootstap', 'angular']
        },
        'app': {
            deps: ['angular', 'angular-ui-router', 'bootstap', 'bootstrap-color', 'angular-resource', 'jquery.flagstrap', 'angular-sanitize', 'angular-cookies', 'angular-locale_en', 'angular-locale_ar', 'jqueryDropDownStyle', 'ddsclickFunctions', 'chatWidgetSettingsFunc', 'directives', 'servicers', 'timerFunctions', 'config', 'hubs', 'ui-bootstrap', 'editor', 'jquery-ui', 'react', 'reactDom', 'moment', 'momentData', 'ngAnimate', 'ui-bootstrap-tpls', 'ckeditor']
        },


    }
});

All communications are conducted via https protocol.

javascriptangularjshttpsrequirejs

Answer №1

Upgrade AngularJS to the most recent version available at 

https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.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

Using Jquery, insert a line break when a specific character is entered in a text area by pressing the Enter button

$('.text-description').keyup(function () { var count = $(this).val().length; if(count == 63){ //insert line break here } }); When the character count reaches 63, including spaces, I want the cursor to move to the next line (sim ...

javascriptjquery

Node.js does not allow for the usage of `.on` to monitor events until the client has been

I'm currently working on developing a WhatsApp chatbot using the whatsapp-web-js package. However, I am facing some difficulties with implementing it due to my limited knowledge in node JavaScript and async code. let client; //To establish connection ...

javascriptnode.jsasynchronouswhatsapp

Tips for avoiding duplicate elements in ASP.NET during postback

My issue is that I have a div with the ID "mydiv" and runat=server. <div ID="mydiv" runat="server"></div> I move mydiv to a Container using jQuery. $("#mydiv").appendTo('#Container'); After a PostBack, my div gets duplicated and I ...

javascriptjqueryasp.net

Tips for implementing the new useState value in your code

Using DataGrid Material UI, I am facing an issue where the selected row is not being deleted when clicking on the delete button. The problem arises from setting the ID value in the useState hook and encountering asynchronous behavior in deleting the rows. ...

javascriptreactjsmaterial-uiuse-state

Tips for optimizing caching of API responses and assets using service workers in Vue CLI 3

import { register } from 'register-service-worker' import pwa from '@vue/cli-plugin-pwa' if (process.env.NODE_ENV === 'development') { // if (process.env.NODE_ENV === 'production') { console.log(pwa) register(`${pro ...

javascriptvue.jsservice-workervue-cli

A fusion of Angulary and Django REST

What is the best way to filter my queryset? For instance: .controller('TViewController', ["$scope", "$stateParams", "Ad", "Banner", function($scope, $stateParams, Ad, Banner) { $scope.ad = Ad.get({ ad_id: $stateParams.ad_id }); $scope.b ...

angularjsdjango-rest-framework

A new Vue component is regenerated after the creation method is called

I am facing an issue with setting the margin of an image to display it in the center of the page when the image dialog is created. I have calculated the margin in the component's created method and everything seems fine during debugging as the image i ...

javascriptvue.jsvuejs2vue-component

Retrieve a specific key value from a dictionary within a Flask function by employing JavaScript

I'm currently working on a feature where a user can input something in a search field, and upon submitting, the script should send a request to a Flask function using JavaScript. The response data should then be loaded accordingly. However, I've ...

javascriptjqueryflask

Customized webpage content using AJAX for interactive map selections

I have integrated JQVMaps into a WordPress website to display a dynamic world map. The goal is to update the content of the page based on the region that the user clicks. Below is a snippet of the code I have implemented as a proof of concept: <div ...

javascriptphpajaxjqvmap

Transferring variables from the $(document).ready(function(){}) to the $(window).load(function(){} allows for seamless and

Just think about if I successfully create percent_pass at the time of document.ready, how can I transfer that variable to window.load? $(document).ready(function() { jQuery(function() { var ques_count = $('.question-body').length; va ...

javascriptjquery

Unable to pass several parameters to a Component

I'm attempting to send three URL parameters to a React Component. This is my approach: App.js: <Route path="/details/:id(/:query)(/:type)" handler={DishDetails}/> DishDetails.js: class DishDetails extends Component { constructor(props) { ...

javascriptreactjs

The .map() function is failing to produce a new array when utilizing the return function

For a React challenge, I was tasked with creating a card that generates a specific number of random numbers based on user input. To achieve this, I wrote a function called "getRandomNum" to generate random numbers within a given range and check if they a ...

javascriptarraysreactjsfunctioncallback

What is the best way to ensure uniform container sizes and properly align images within them?

Customize Image Sizes: Is there a way to set a standard container size and adjust image sizes properly without compromising clarity or aesthetics? The images vary in dimensions, so should they be standardized or is there another solution? Code snippet: ...

javascripthtmlcssdjangobootstrap-4

When incorporating web animation into an SVG graphic, the animation may malfunction if used as a background

Recently, I created an SVG-based loading indicator using an online tool. However, every time a page with this loading indicator loads, Chrome displays a warning about SMIL animations being deprecated. To address this issue, I decided to explore replacing t ...

javascriptcsssvgbackground-imageweb-animations

Debugging JavaScript in ASP .NET (solving quick breakpoint problems)

There seems to be a mystery about setting breakpoints in my JavaScript code - sometimes it works, other times it doesn't. Despite all efforts, I can't seem to figure out what factors contribute to this inconsistency. While debugging the dynamic p ...

javascriptasp.netvisual-studio-2010debuggingbreakpoints

What steps can I take to expand this on a grander level?

I have a code snippet for a personality quiz, but I'm facing an issue with increasing its size. Here's the HTML code: <h3>1. What is your favorite color?</h3> <input type="radio" name="q1" value="A" /> A. Red. <input type="r ...

javascriptjqueryhtml

Searching for a method to retrieve information from an API using jQuery in Node.js?

I'm currently working on fetching data from an api to display on the front-end. This is my server-side code - app.get('/chats',function(req,res){ User.find({}).exec(function(err,user){ res.send(user); }); }); On the clie ...

javascriptjquerynode.jsajax

How can I specify which node_modules to include when using electron-packager in Electron?

I am in the process of packaging my electron app, and it specifically requires the mqtt and node-notifier modules. What I want to do is exclude all node_modules except for these two modules. Let's say I want to exclude the following files from packag ...

javascriptregexnode.jselectron

jQuery setup for doWhen

Struggling to get doWhen functionality to work properly. Here is my index.html setup: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dowhen.min.js"></sc ...

javascriptjqueryjquery-plugins

When I submit a form with an empty date input field, the Datepicker is sending a 0000-00-00 date

[I am experiencing an issue with my date input field. When I submit without entering any value, the date on the view page shows as 0000-00-00 instead of being empty or blank.] <div class="col-sm-3 col-sm-offset-1"> <div class="input-group"& ...

javascriptphpjqueryhtmlcodeigniter