Is Angular 2 Really Suitable for Multi-Page Applications?

I am currently working on a multi-page app using Angular2 and have noticed that the load times are slower than desired when in development mode.

While searching for solutions, I came across a thread on stackoverflow that explains how to set up Angular2 for non-SPA applications: How to use Angular2 as a non-SPA?

Although this method works, it seems to impact the app's loading speed negatively. What is the best way to utilize Angular2 in Multi-Page Apps? Is it feasible but not recommended practice? Could React be a better option for this scenario? Please share your insights.

It is important to note that my decision to opt for a multi-page app over a single page app is driven by the need for data-driven content and SEO considerations. Angular has limitations in terms of search engine optimization and tools like Prerender and Angular Universal did not meet my requirements effectively.

Any thoughts on this dilemma?

EDIT:

Some have asked why I am pursuing this approach. In response to one commenter, here is a justification:

"I require certain highly interactive pages that would benefit from Angular's capabilities. Additionally, being able to reuse components across projects is a key advantage."

javascriptangulartypescriptfrontend

Answer №1

I never considered this before.

My intuition tells me that caching will play a vital role in optimizing performance. When developing an app, separating resources (such as js, html, etc.) by vendor and app (or page) type can be beneficial. Vendors typically remain consistent across pages and are the largest in size. By isolating these resources, you may see improved server and browser cache hits.

Here is a list of things that do not change from page to page:

  • static resources, such as images
  • resources referenced in index.html, which often remain the same even on multiple pages
  • your component module library, if separated, can be included as another vendor module file

It's important to test if unchanged elements are grouped together. If you have three major files and two remain constant across pages, then you're on the right track. Otherwise, it may impact performance negatively.

Additionally, consider server rendering to exercise more control over caching, especially for SEO purposes.

Answer №2

Instead of approaching this issue with a broad concept, I propose a specific solution for creating 10 pages.

  • Connect the server to direct traffic to the same index.html through different URLs;
  • Utilize the URL parameter to determine which page is being accessed;
  • Eliminate all internal Angular routing
  • Instead, use ngIf to customize the routing, as traditional angular routing may not be necessary or appropriate in this scenario. You can activate the corresponding DOM elements for each particular page.

This setup essentially results in the server repeatedly accessing the same page (like identical twins), effectively serving as a SPA for multiple URLs.

But what if you need to create 100 pages?

In that case, there's an even more efficient approach available by dividing the pages into sets – for example, 10 pages in product.html and another 10 in admin.html. Here's how:

  • Erase any nested Angular routing
  • Use Html instead to break down URLs or sub-URLs

This strategy allows easy scalability and reflects a return to web development practices from a decade ago.

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

AngularFire2 - Deleting an item with Observable - Issue with last item not being removed from the User Interface

When I execute this function, the item is deleted from my Firebase database. However, in my Angular 2 app, when it reaches the last entry, it removes it from the database but does not remove it from the list displayed in my *ngFor loop. Strangely, upon ref ...

angularfirebaseangularfire2

getting the child td element within a tr using a variable that changes dynamically

I'm facing an issue where I am trying to access the <td> of a <tr> using the jQuery .eq() function. The code snippet below illustrates what I am attempting: var foundElement = 3; var values = $(this).children("td:nth-child('" + foun ...

javascriptjqueryparent-child

Picture in a clear background without any alteration

Is there a way to create a background-color with opacity inside an image without affecting the image itself? The issue lies in the fact that the transparent background-color makes everything underneath it, including text and the image, transparent. Below ...

javascriptjqueryhtmlcss

unable to expand navbar in Angular 5 project with Bootstrap 4

I am encountering an issue with my navigation bar in a project that uses Angular5 and Bootstrap4. The navigation bar is supposed to expand when the screen size is small, as indicated by the navbar-expand-sm class in Bootstrap4. However, the navbar remains ...

htmlcssangulartwitter-bootstrapbootstrap-4

jQuery validation: Form failing to pass validation

I have encountered an issue with a simple JavaScript file on my ASP.NET MVC website. While the input masking feature works smoothly, the form validation seems to be malfunctioning. Even when I enter a phone number that is only 4 digits long, the validation ...

javascriptjqueryasp.netformsjquery-validate

AngularJS ng-click incompatibility causing non-functioning popover content

I've gone through all the posts regarding this issue, but unfortunately, none of them proved to be helpful. It seems that the jsfiddle and plunker links provided are no longer functioning as expected. My objective is quite simple - I want to place a ...

javascriptjqueryangularjstwitter-bootstrapangularjs-ng-click

Having trouble activating the Invalidate Cache function in rtk query with tags

Here is a snippet from my Api.js file: export const api = createApi({ reducerPath: 'api', baseQuery: fetchBaseQuery({ prepareHeaders: (headers, { getState }) => { const userInfo=JSON.parse(localStorage.getItem('userInfo' ...

javascriptreactjsreact-nativereduxrtk-query

What is the best way to choose all elements from an array based on their key and then combine their values?

Currently, I am working on an application that allows users to read articles and take quizzes. Each article is assigned to a unique category with its own _id. Quiz attempts are stored in a separate table that references the articles, which in turn referenc ...

javascriptarraysobjectmultidimensional-array

The navigation is designed to only show up as I scroll down the page, but ideally it should be visible

I am trying to make the navigation bar appear on page load instead of when I scroll down the page. Currently, I am using this jQuery code: <script type="text/javascript> $(document).scroll(function() { if ($(this).scrollTop() == 20) { ...

javascriptjqueryhtmlcss

After making a POST request, I must ensure that the page is rendered accordingly

How can I efficiently handle requests to the server and update the page without reloading it, following SPA principles using useEffect()? I attempted to implement something like this: useEffect (() => { addProduct (); }) but it proved to be ineffectiv ...

javascriptnode.jsreactjs

Dragging an image in KineticJS gets stuck after the drag operation is completed

My experience with KineticJS has been positive so far, but I have encountered an issue with dragging images. In the example below, I have set the image to be draggable, but after the initial drag, it seems like the image can't be moved again. var sta ...

javascripthtmlcanvashtml5-canvaskineticjs

Pass the returned variable value from a request.get call to another function in NodeJS Express

I have a situation where I am calling a function that makes a request to get some JSON data and then fills in the variables from my router.get method. The issue I am facing is that the variables are getting their value inside the callFunc function, but wh ...

javascriptnode.jsexpresspug

Controlling LED lights using Johnny-Five and Arduino in NW.js

I have a setup with my board that includes two buttons (each with pull-up resistors) and two LEDs. My goal is to make each button activate its corresponding LED while deactivating the other one. Here's the code I'm using: var five = require(&ap ...

javascriptnode.jsarduinonw.jsjohnny-five

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

javascripthtml

The Node.js server seems to be continuously loading without producing any output

I've been struggling with getting my server to function properly. Whenever I send post data, the page just keeps loading and doesn't display any results. Here is a snippet of my Node.js file: var http = require('http'); var url = requi ...

javascriptnode.jspostdata

How do you transform data stored in map to string format?

The main objective is to take a large txt file and replace all words according to the information in a csv file. This process will generate a new txt file as well as a new csv file that shows the frequency of each word. I'm currently struggling with ...

javascriptnode.jscsvparsingdictionary

Utilize npm node to dynamically adjust screen resolution

Currently developing a game using electron. I'm experiencing FPS drops when running it in full-screen mode. To improve the game's performance, I need to change the screen resolution programmatically. My current resolution is 1280x800, but I would ...

javascriptnode.jsnpmelectron

Tips for inserting data into a PHP modal using MySQL and Ajax

Here is the code snippet I've written: <div class="container"> <div class="row"> <div class="col-md-3"> <div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> ...

javascriptphpjquerymysqlajax

The variable in my scope is not reflecting the changes in the HTML view

Here is my code for handling file attachments in AngularJS: $scope.attachments = []; $scope.uploadFile = function(files){ for(var i=0; i<files.length; i++){ $scope.attachments.push(files[i]); console.log($scope.attachments.length); } } ...

javascripthtmlangularjsangularjs-scope

JavaScript parsing error occurred

Encountering a parsing error in my JavaScript code when deploying Firebase functions. The error mentions an unexpected token, indicating there might be a character out of place. I've been stuck on this issue for weeks now. Any assistance would be grea ...

javascriptfirebase