Strategies for enhancing performance in an Angular 4 project

Currently, I am engaged in a project that involves utilizing Angular 4 for the front-end and PHP for the back-end with the support of an Apache server on Ubuntu 16.04 LTS. We have incorporated Node JS to facilitate the functionality of Angular. This raises two queries - first, is it possible to run Angular 4 without Node JS? And secondly, could the performance issues we are experiencing be attributed to using Node JS on Apache, or is it perhaps my code causing the sluggishness of the applications? For instance, upon inspecting the access log of the Apache server by running 'cat /dev/null >access_log', it appears that around 30 requests are being made just to load the initial page...how can this process be optimized?

You can view a snapshot of my work on Plunker through the following link (while not all the code is included, it should provide some insight into the structure): [Mypluker][1]

   [1]: http://plnkr.co/edit/4CUPwqehwkiHNnFd1NtU?p=catalogue
apacheangulartypescript

Answer №1

The quickstart seed provided by angular.io is not recommended for production use. It serves as an example of how you can quickly begin development, but certain aspects such as typescript transpilation within the browser should be avoided.

A better solution for both development and production builds is to utilize angular-cli.

For a production build, only a webserver capable of serving static files is required without the need for nodejs.

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

Switching from dark mode to light mode when reloading or navigating to a new page

Hello everyone. I've successfully implemented a dark mode toggle on my website, but I'm facing an issue where the mode resets whenever I navigate to a new page or refresh the current page. Can anyone help me figure out how to prevent this from ...

javascriptreactjstypescriptnext.js

The Angular router is causing an issue where when navigating back, my component does not reset to 0 as expected, resulting in

I'm currently working on an ionic-angular app and implementing a Register feature where users input their information step by step. The issue I'm facing is with the backward navigation functionality - when users go back using the arrow button, th ...

angulartypescriptionic-framework

Best practices for launching a Symfony2 application into production

I recently completed developing a Symfony application, but I am having trouble deploying it to a live Apache server. When I transfer the files to public_html, the assets do not load correctly. Can someone provide me with a detailed guide on how to deploy ...

phpapache.htaccesssymfonyconfiguration

Mistakes following update to Angular 4 from Angular 2

After upgrading from Angular2 to Angular4, I encountered these errors in the CLI. While my app continues to function after the upgrade, I am curious about possible solutions to resolve these errors. Any suggestions? https://i.stack.imgur.com/CyYqw.png He ...

typescriptnpmupgradeangular

receiving feedback from Firebase push action

I have a method to add a new entry in Firebase Realtime Database like so: assignGiftCard(email:string, type: string, value: number, code:string){ let giftCard = { "type" : type, "value": value, "code": code } this.db.list(& ...

angularfirebasefirebase-realtime-databasepromise

Using Flickity API in Vue 3 with Typescript Integration

I have encountered an issue with implementing Flickity in my Vue 3 application. Everything works perfectly fine when using a static HTML carousel with fixed cells. However, I am facing difficulties when attempting to dynamically add cells during runtime us ...

javascripttypescriptvue.jsvuejs3flickity

execute npm scripts concurrently

Seeking a simpler solution for managing pre-script hooks in my package.json file. Currently, I have multiple commands that all require the same pre-script to run. While my current implementation works, I'm wondering if there is a more efficient way to ...

angularnpmhookpackage.json

Exploring the process of incorporating a JavaScript library into an Angular project

I've encountered this issue before and know there are various workarounds available. I often search online for front-end design code to enhance the user experience of my projects, such as carousels, animations, and more. However, most of these project ...

javascriptangular

Exploring the process of writing JSON in Angular to retrieve diverse data points

I have successfully printed the following JSON data in Angular from a local file: [{ "Firstname": "Steve", "Lastname": "Jansson" }, { "Firstname": " ...

arraysjsonangular

Tips for creating dynamic alerts using mui v5 Snackbar

My goal is to call an API and perform several actions. After each action, I want to display the response in a Snackbar or alert. Despite iterating through the messages in a map, I'm only able to show the first response and none of the others. Here is ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Error encountered when attempting to inject a service into another service due to circular dependency issues

I have encountered an issue while working on my Angular 5 application where I am facing errors when trying to inject one service into another service. Below is a snippet of the DataService: import { Injectable } from '@angular/core'; import { H ...

angulardependency-injectionfrontendangular-services

Having trouble accessing the product details in my Angular app hosted on Azure

In Azure, my Angular application is hosted. There's an issue where users cannot open the app by pasting a specific URL into the browser (). Instead of opening, it redirects to , even when pasting . If I try pasting in the browser, it works fine. But ...

angularazureangular-routing

Finding all the dates within a specified date range in an Ionic 3 application

If I have a starting date of November 30, 2019 and an ending date of December 7, 2019, how can I generate a list of all the dates in between and save them in an array? I am looking to format the array like this: ["2019-11-30", "2019-11-31", "2019-12-1", ...

angularionic-frameworkionic3

Creating a blank webpage after including a component tag for an Angular form

I encountered an issue while developing an Angular form. It seems that using the app-name-editor tag causes my entire HTML page to go blank, and the form does not display. However, removing the tag restores the webpage's functionality. This leads me t ...

javascripthtmlcssangular

Creating a csproj file for an existing project in Angular: A step-by-step guide

I recently utilized the Angular CLI (version 12) to initiate my Angular project, but I noticed that the csproj file is missing. Is there a method to generate the csproj without compromising any of the existing files? Any help would be greatly appreciated ...

angularcsproj

Updating the DOM after making changes with Maquette involves calling the `renderMaquette

In a previous discussion, I expressed my desire to utilize Maquette as a foundational hyperscript language. Consequently, avoiding the use of maquette.projector is essential for me. However, despite successfully appending SVG objects created with Maquette ...

javascripttypescriptsvgvirtual-dommaquette

TypeScript: defining a custom type with a collection of properties following a consistent pattern

I am looking for a way to create a type that can accommodate any number of properties following a predefined pattern, like so: type Values = { id: number; id1?: number; id2?: number; id3?: number; // ... somethingElse: string; anotherOne: num ...

typescript

Dynamically loading components within an Angular application

I am tasked with displaying different components at specific times by iterating through them. Below is an example of how I have attempted to achieve this. The components I can use are determined by the server. <ngb-tabset [activeId]="1"> ...

javascriptangulartypescriptangular-material

Is it possible to retrieve the original array after removing filters in Angular?

Within my component, I have an array that I am filtering based on a search string. The filtering works as expected when the user inputs characters into the search field. However, I am encountering an issue when attempting to display all records again after ...

javascriptangulartypescript

Invisible Angular Material Date Picker Issue

I am facing an issue with the angular material datepicker in my project. The datepicker itself remains invisible, but it functions when I click on its location or where the calendar icon is placed. To make it more clear for users, I have added a button nex ...

htmlangulardatepickerangular-material