Page loading causing sluggishness in Angular application

I've been encountering this problem for quite some time now and have searched extensively online for solutions. However, I believe I may not be using the correct terminology to accurately pinpoint the issue.

Within my package.json, I have included the following command which is executed when running $ npm start:

ng serve --host 0.0.0.0 --disableHostCheck --proxy-config proxy.dev.json --extract-css --show-circular-dependencies false

Upon starting my application with 'npm start', everything appears to be functioning correctly. Nevertheless, after seeing 'webpack: Compiled succesfully,' there seems to be a significant delay (7-8 seconds) before the page or loading screen is displayed (a spinner is shown during HTTP calls).

I am curious about the process that occurs between successful compilation and the actual display of the page. Following a successful compilation, I encounter a blank page for 7-8 seconds.

Once the page loads and I navigate to another page through the menu, everything displays instantly. However, if I manually change the URL and hit enter, it takes 7-8 seconds to load the page.

During these delays, there is no activity evident in the console, network tab, or elsewhere... Are there any troubleshooting steps I could take to identify this intermittent lack of response?

It is worth noting that this issue does not arise when serving the application with Apache after executing ng build --prod.

Angular version 5.2.11 Angular-CLI 1.7.4

Network tab https://i.sstatic.net/66Se3.png

Performance tab https://i.sstatic.net/TpbsZ.png

javascriptangulartypescriptwebpackangular-cli

Answer №1

I wonder about the process that occurs between a successful compilation and the actual display of the page. I observe a period of 7-8 seconds where the page remains blank.

During this loading time, your browser is fetching the bundles required for your application. In development mode, these bundles are generated in their raw size by default when you run $ ng serve, which can result in larger file sizes compared to production mode.

When running in production mode with --prod, the bundles are minified, resulting in smaller files that require less time to download.

REMEMBER:

To see this process in action, open your browser console and navigate to the network tab to view the bundles being downloaded and check how long it takes.

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

Displaying line breaks <br> on the browser when there are characters stored in the database

Within my mongo database, there is a document containing a field called reviewText: 'this is line 1\nthis is line 2',. This text was entered by a user in a textarea, hence the presence of \n to represent line breaks. I want to display t ...

javascripthtmlmongodbexpressejs

What could be causing my Vue code to behave differently than anticipated?

There are a pair of components within the div. When both components are rendered together, clicking the button switches properly. However, when only one component is rendered, the switch behaves abnormally. Below is the code snippet: Base.vue <templa ...

javascripttypescriptvue.js

Identify data points on the line chart that fall outside the specified range with ng2-charts

I'm struggling to figure out how to highlight specific points on a line chart that fall outside a certain range. For instance, if the blood sugar level is below 120, I want to display that point as an orange dot. If it's above 180, I want to show ...

javascriptangularng2-charts

Detect both single and double click events on a single Vue component with precision

I did some online research but couldn't find a clear answer. However, I came across this article -> Since I didn't quite understand the solution provided, I decided to come up with my own inspired by it. detectClick() { this.clickCount += ...

javascriptvue.jsvuejs2vuetify.js

Issue occurred while trying to set the value from an API call response in the componentDidMount lifecycle method

There is a boolean variable disableButton: boolean; that needs to be set based on the response received from this API call: async getDocStatus(policy: string): Promise<boolean> { return await ApiService.getData(this.apiUrl + policy + this.myEndpo ...

javascripttypescript

Add the file retrieved from Firestore to an array using JavaScript

Trying to push an array retrieved from firestore, but encountering issues where the array appears undefined. Here is the code snippet in question: const temp = []; const reference = firestore.collection("users").doc(user?.uid); firestore .collec ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Steps for defining a function in AngularJS

I created a function and implemented it in the following manner: JavaScript : function updateInstitution (isValid) { alert('hi'); if (!isValid) { $scope.$broadcast('show-errors-check-validity', 'vm.form.institutio ...

javascriptangularjsangular

Steps for resolving the error message: "An appropriate loader is required to handle this file type, but there are no loaders currently configured to process it."

I am encountering an issue when working with next.js and trying to export a type in a file called index.ts within a third-party package. Module parse failed: Unexpected token (23:7) You may need an appropriate loader to handle this file type, current ...

javascriptreactjstypescriptnext.js

What is the most effective approach to invoking a handling function within a React component?

While delving into the ReactJs documentation on Handling events, I found myself pondering about the preferred method for invoking a handling function within a component. A simple yet fundamental question crossed my mind: when should one use either onClick ...

javascriptreactjs

JQuery form plugin - submitting a form automatically on onchange event

As a beginner in JQuery, I am looking to utilize the JQuery form plugin for file uploads and would like to trigger the form submission as soon as a file is selected. This should occur upon the onchange event of the input tag: myfile. <html> <body ...

javascriptjquery

Retrieving the key from an object using an indexed signature in Typescript

I have a TypeScript module where I am importing a specific type and function: type Attributes = { [key: string]: number; }; function Fn<KeysOfAttributes extends string>(opts: { attributes: Attributes }): any { // ... } Unfortunately, I am unab ...

typescript

Unable to execute a POST request using the HTTPParams Object

I'm facing a challenge as a newcomer to Angular when it comes to fetching data from a server using the Angular httpClient and HttpParams. While the uri specification works, I am striving for an alternative solution using the HttpParams Object. I&apo ...

angularhttp

Is the image overlay experiencing a flickering issue?

Last time, none of the solutions seemed to work quite right with the project, so let me try asking the question in a slightly different way this time. Basically, I have an image that, when someone hovers their mouse cursor over it, a div appears (containi ...

javascriptjquery

What is the process for adding new data to a data source without overwriting existing information?

I need assistance with a react native app I am developing. I am currently facing an issue where the data received from a fetch request needs to be displayed in a list view. However, each time new data is fetched, it overwrites the previously received data ...

javascriptreactjsreact-native

Encountering an issue with the module 'rxjs' and its corresponding type declarations not being found in the Angular stackblitz environment

Encountered an issue while working on an Angular 12 - rxjs 7 project in Stackblitz. The error message received when trying to import a Subject is: Cannot find module 'rxjs' or its corresponding type declarations.(2307) https://i.sstatic.net/eH ...

angularrxjscodepenstackblitz

JavaScript: "Changing the date string to a different format"

Looking to convert a date string from yyyy-MM-dd HH:mm:ss.SSS in PST timezone to UTC format 2016-07-28T17:22:51.916Z. Any ideas on how to achieve this transformation? ...

javascriptdatetime

Module for Node.js that handles .ini files where variable names can begin with a number

.ini file: [1] 10X=true [2] 10X=true node.js : var mS = ini.parse(fs.readFileSync(__dirname + '/XXX/MS.ini', 'utf-8')); console.log(mS.1.10X); I am utilizing the ini module in node.js, which can be found at this link: https://www.n ...

javascriptnode.jsini

Monitoring for incoming chat messages

I'm relatively new to Firebase and Angular2. I'm currently working on creating a chat app that integrates Firebase with Angular2 based on tutorials I've been following. Specifically, I've been using this tutorial to build the chat app ...

angulartypescriptfirebaseangularfire

Replace i18next property type in React for language setting

We have decided to implement multilanguage support in our app and encountered an issue with function execution. const someFunction = (lang: string, url: string) => any If we mistakenly execute the function like this: someFunction('/some/url', ...

typescripti18nextreact-i18next

Guide on utilizing fs.readStream and fs.writesream for transmitting and receiving video file (.mp4) either from server to client or vice versa using Node Js

## My Attempt to Receive and Save Video Stream in .mp4 Format ## ---------- > Setting up Server Side Code > Receiving Video stream from client and saving it as a .mp4 file var express = require('express'); var app = global.app = expor ...

javascriptnode.jsexpressstreamvideo-streaming