"Exploring Umbraco's path to integrating with Angular for seamless

I have encountered an issue in my Umbraco web application where I have two SPA angular applications on pages /pageOne and /pageTwo. Whenever these pages are refreshed, a page not found error occurs due to Umbraco's routing system.

Is there a way to reconfigure the routes so that this error can be avoided?

I found a helpful question on Umbraco 7 single page application routing, but it addresses all URL redirects to Angular whereas I only need to address two specific URLs.

Could a solution involve something like the following code snippet?

<add name="SomeName"
     virtualUrl="^~/(? pages-which-are-not-angular-SPA-here )(.*)"
     rewriteUrlParameter="ExcludeFromClientQueryString"
     destinationUrl="~/"
     ignoreCase="true" />
javascriptangularjsroutesumbraco

Answer №1

To instruct Umbraco to disregard specific routes, you can input them into the umbracoReservedUrls property within the appSettings section of the web.config file. This property should contain a list of URLs separated by commas that Umbraco will completely ignore. If there are plans to include more routes in the future, they can be grouped together under a common folder like /ang/pageOne and /ang/pageTwo, and then add the /ang/ segment to the umbracoReservedPaths property which consists of entire folders that Umbraco should not process.

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

Why is the background object still showing in HTML after implementing z-index?

I'm currently working on a popup to display some preload content, but unfortunately it's not functioning properly. Instead of showing the preload content, it's displaying another element. <html> <script src="http://www.flygoldf ...

javascriptjqueryhtmlcss

Error in jQuery ajax request when passing multiple variables to php script

When I use ajax to send two variables to PHP, the second variable is received correctly, but the first variable is always reported as NULL by PHP. I checked the JavaScript variable before sending it and confirmed that it contains an array of strings. I&apo ...

javascriptphpjqueryajax

Dynamic jquery multiple select menu not refreshing properly

Welcome to the new year! I am currently working on creating a multiple select list with the attribute (data-native-menu="false"). The and elements are dynamically generated through a websql query. However, when I execute the code, none of the options are ...

javascriptjqueryhtmljquery-mobile

Preventing Columns in SlickGrid from Being Reordered

Is there a way to prevent specific columns in SlickGrid from being reordered? I have tried looking for a solution but couldn't find one. Unlike the 'resizable' option, there doesn't seem to be an option for each column to allow or disal ...

javascriptangularjsslickgrid

"Enhance your website's navigation with JsTree using personalized JSON

I have a JSON structure that cannot be altered through requests. { "Object": [ { "url": "http://www.google.com" } ], "id": 1, "name": "Redirection Rule", "Object": ...

javascriptjqueryjsonstructurejstree

Navigating to a different state key within a state object in React - a simple guide

Trying to dive into React, I encountered an issue. My goal is to create my own example from a tutorial. import React, { Component } from 'react'; class MyComponent extends Component { state = { persons: [], firstPersons: 5, variab ...

javascriptreactjs

What is the best method for importing Bootstrap into SvelteKit?

I am currently working on a SvelteKit website. I have integrated Bootstrap 5 into my project by adding it to the app.html file provided by the SvelteKit Skeleton starter project: <!-- Bootstrap styles and javascript --> <link rel="stylesheet ...

javascriptbootstrap-5sveltesveltekit

What is the best way to view or save the content of a PDF file using a web service?

As a newcomer to web services and JavaScript, I am facing a challenge with calling a web service that returns a PDF file in a specific format. Here is the link to view the PDF: https://i.stack.imgur.com/RlZM8.png To fetch the PDF, I am using the following ...

javascriptweb-servicespdf

React application failing to recognize environment variables (create-react-app)

I've been attempting to retrieve the environment variables within my React App, but for some reason, they're not being recognized. console.log(process.env) https://i.sstatic.net/Q71c3.jpg All of the variables are stored in a file named .env.dev ...

javascriptreactjs

Issues with hiding divs using AngularJS and Bootstrap pagination

Currently, I am utilizing AngularJS and pagination to display multiple divs on my webpage. These divs are then hidden based on specific criteria that I have established. You can see an example of the code snippet below: <div class="Data ...

javascriptcssangularjs

Retrieve information from reader.readAsArrayBuffer

I'm facing an issue with the following code. My goal is to return the uploadData array back to the hello variable, but it's returning as a blank array. Even though the console log shows the correct array of data like {name: 'bob'}, it b ...

javascriptreader

Ways to enhance the Response in Opine (Deno framework)

Here is my question: Is there a way to extend the response in Opine (Deno framework) in order to create custom responses? For instance, I would like to have the ability to use: res.success(message) Instead of having to set HTTP codes manually each time ...

javascripttypescriptdenoopine

Activate a spinner when a button is clicked within a row of an antd table

I created a table with a column that includes a button like the one below: const columns = [ ... { title: "button", dataIndex: "key", render: (text, record) => { return ( <Button icon={<Del ...

javascriptreactjsnext.jsantd

Concealing various <div> components with ng-show/ng-hide in AngularJS

Hey there! I'm currently working on creating a Single Page App, but I've hit a roadblock trying to toggle the visibility of div elements using a checkbox. Instead of knowing how to create a module for hiding/showing elements, I decided to search ...

angularjs

Managing soft keyboard display and disappearance events on Android and iPhone within a hybrid application utilizing Worklight: A Comprehensive Guide

Looking for guidance on managing softkeyboard show/hide events within a hybrid app for both Android and iPhone using Worklight technology. Currently utilizing version 6.1.0.01 of Worklight. ...

javascriptandroidiosibm-mobilefirsthybrid-mobile-app

Combine multiple string values into a single field within an array in MongoDB

Imagine I have a collection of documents in the following structure: { "_id": "3_0", "values": ["1", "2"] } I want to create a projection where the values from the array are concatenated into a single field like this: { "_id": "3_0", "va ...

javascriptmongodbmapreducemongodb-queryaggregation-framework

Is there a way to showcase a Bootstrap popover using HTML content sourced from a GridView?

I've spent the last couple of hours experimenting with this, trying different things. I can successfully display a popover with basic title and content, but I'm struggling to make it work with HTML and Eval() as the content. Here's my curren ...

javascriptc#jqueryasp.netpopover

Add JQuery to the necessary locations within an AngularJS project

I recently built an engaging 404 Error page using JQuery, but I'm facing a challenge integrating it with my AngularJS project. It seems like I need to include jquery.min.js, 404.js, 404.min.css, and a script tag in the index.html file which is causing ...

javascriptjqueryangularjsangular-ui-router

Refresh a collection of objects with a new set of objects

Is there a way to update an array of objects with values from another array of objects? Consider these two arrays: const originalArray = [ {id:'a',html:'',user:''}, {id:'b',html:'',user:''}, ...

javascript

Issue with importing and exporting JavaScript on an HTML file is not functioning as expected

I recently worked on a basic JavaScript project involving export/import and encountered an error when inserting it into the HTML. The error message read: "Uncaught SyntaxError: Cannot use import statement outside a module". I researched this issue on Stack ...

javascripthtmlimportexport