What causes the "This page isn't responding" error to pop up in Edge and Chrome browsers while attempting to perform consecutive tasks in a web application built with Angular 8?

Trouble with Page Loading

Whenever this error occurs, I find myself unable to perform any activities on that page. The only solution is to close the tab and open a new one.

My current code allows me to navigate through an array list (Next and Previous) using array indexing:
Eg:
 NextClicked(){
        this.spinner.show('priority');
        let CurrentArray : any;
        this.buttonClicked = true
        this.bindStaff = false;
        this.NextClickCalled =true;
        console.log("======Next Clicked=====")
        let CurrentArrayElement = this.modelProject.ID
        console.log(CurrentArrayElement)
        CurrentArray = JSON.parse(localStorage.getItem('CurrentProjectPageRecords'));
        console.log(CurrentArray);
        let CurrIndex =  CurrentArray.findIndex(x => x.ID === this.modelProject.ID);

CurrIndex = CurrIndex+1

let NextID = CurrentArray[CurrIndex].ID

 this.router.navigate(['/projects/' + NextID +'/edit/'+this.projectType]);

}

Clicking "Next" repeatedly and then trying to go back by clicking "Previous" seems to cause the issue. If I click "Next" five times and then try to click "Previous," the page freezes and displays the aforementioned browser warning.

PreviousClicked(){
        this.spinner.show('priority');
        let CurrentArray : any;
        this.buttonClicked = true
        this.bindStaff = false;
        this.NextClickCalled =true;
        console.log("======Previous Clicked=====")
        let CurrentArrayElement = this.modelProject.ID
        console.log(CurrentArrayElement)
        CurrentArray = JSON.parse(localStorage.getItem('CurrentProjectPageRecords'));
        console.log(CurrentArray);
        let CurrIndex =  CurrentArray.findIndex(x => x.ID === this.modelProject.ID);

CurrIndex = CurrIndex-1

let NextID = CurrentArray[CurrIndex].ID

 this.router.navigate(['/projects/' + NextID +'/edit/'+this.projectType]);

}

I'm not entirely sure if this is the exact cause of the issue, but consistently performing this activity leads to the warning message mentioned above.

Explore API's Here

Answer №1

Resolving my issue with Angular by implementing Lazy Loading

When it comes to working with Angular and the CLI, it's important to consider enabling lazy loading for your routes. By implementing lazy loading, you can keep the initial payload small as your application becomes more complex with additional features. The hashed generated bundles help in properly caching data thanks to the cache headers discussed earlier.

To learn more about lazy loading, check out this informative link:

Click here for more details on lazy loading

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

React Native's state changes dynamically, however, the JSX conditional rendering fails to update the user interface accordingly

Greetings and thank you in advance for your time! I'm currently facing a unique challenge with React where I am struggling to render a specific UI element based on a check function. My goal is to create a multiple selection filter menu, where clickin ...

Vercel and Firebase Realtime Database causing snapshot.val() to return null during build deployment

Creating a blog application using Next.js, Firebase Realtime Database, and Vercel for hosting has been seamless on my local machine. Even after running npm run build, everything functions perfectly. However, when deployed to Netlify in production, the snap ...

In my current project, I am implementing a feature in Angular 6 to close a Bootstrap modal once the server successfully receives the necessary data

Here, I am working on creating the content for a CRUD component that saves data as needed. My goal is to make the modal disappear once the data is submitted. <div class="container"> <div class="table-wrapper"> <div class="table-ti ...

- The click function is failing to work after an ajax call [Potential event delegation problem]

I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...

Unexpected error from API call detected within Mint localhost Template Kits elements

Hello Everyone, hope you're all having a good day! Recently, I installed the Elementor and Envato Elements plugins on my localhost Linux Mint WordPress setup. After configuring permalinks and other settings in WordPress, I proceeded to browse Templat ...

What could be the reason for the empty response in my PATCH request in Javascript?

I am facing an issue with my app that runs Rails in the backend and Javascript in the frontend. The controllers, routes, and CORS are all set up correctly. Both my Post and Get requests work without any problems. However, when I attempt to make a patch req ...

angular express cycle without end

I'm experiencing an issue with my express/angular app where the index page is causing an infinite loop. Here's how I have set up my app: app.configure(function() { // setting up our express application app.use(express.logger('dev& ...

Unable to replace default typography in MUI with custom typography theme on Next.js

In my Next.js React project, I am utilizing Material-UI (MUI) with a customized theme. Although the colors from the theme are being applied successfully, I am encountering difficulty in adjusting the default font sizes of H2 and H5 elements. Even though I ...

The code snippet $(this).nextAll("#...").eq(0).text("***") isn't functioning as expected

I am experiencing an issue with the following line of code: $(this).nextAll("#status").eq(0).text("Deleted"). I am trying to insert the text "Deleted" in a <span> tag, but it does not seem to be working... Here is my code: admin.php PHP: $sql = "SE ...

Assertion using Node.js with Selenium WebDriver

I am currently working on implementing assertions for testing using selenium webdriver with node js. However, I am encountering an issue where it returns undefined when trying to assert the page title (which is the URL of the page). It seems like I may n ...

The value entered for creating a payment method is invalid: the card must be in the form of an object

I am in the process of setting up a payment method using the Next.js library from Stripe. Here is the code snippet: import React, { FunctionComponent } from 'react'; import type { DisplaySettingsProps } from '@company/frontoffice/types' ...

Storing information using the DateRangePicker feature from rsuite - a step-by-step guide

Currently, I am working on storing a date range into an array using DateRangePicker from rsuite. Although my application is functioning correctly, I am encountering some TypeScript errors. How can I resolve this issue? import { DateRangePicker } from " ...

NodeJS is constantly refreshing the data in the database table

Every day, I use a cron job to scrape data and insert it into a database. However, I'm facing an issue where the database results on the server do not refresh themselves after new data is inserted. I've come across 2 solutions here, but one was ...

Enhanced capabilities for the <input> element

I am seeking to develop a component that incorporates an <input> tag and offers additional functionalities like a clear text value "X" icon or any other customized actions and markup, all while maintaining the same event bindings ((click), (keyup), e ...

Having trouble retrieving the tag name, it seems to be giving me some difficulty

I have two separate web pages, one called mouth.html and the other nose.html. I want to retrieve a name from mouth.html and display it on nose.html when a user visits that page. How can I accomplish this using JavaScript? Here is the code snippet from mou ...

Any suggestions on how to secure my socket connection following user authentication in redux?

After onSubmit, userAction.login is called which then dispatches "SUCCESS_AUTHENTICATE" to set the token of the user and socket state in their respective reducers. How can I proceed to trigger socket.emit("authenticate", {token})? ...

Leveraging HTML tables for input purposes

Just starting out with php, HTML, and mysql. Using HTML tables for the first time here. Created an HTML table filled with data from a MySQL table. Planning to use this table as a menu where users can click on a cell with a specific date. The clicked date ...

What is the correct way to utilize the submit() function within this specific form?

I have a small registration form that requires validation before submission. In order to achieve this, I've developed a JavaScript function as shown below: var name = document.getElementById('name').value; var company = document.getElem ...

The instantiation of generic types in Typescript

I have been working on a function that aims to create an instance of a specified type with nested properties, if applicable. This is the approach I have come up with so far. export function InitializeDefaultModelObject<T extends object> (): T { ...

When importing a React Component with styling into the pages folder, it fails to function properly

I created a component in my components directory with custom styling: // import Link from "next/link"; import {Link} from "react-scroll" export default function Navbar() { return ( <div className="fixed w-full h-[79px] fle ...