Angular application across multiple subdomains

Currently creating an angular application that allows users to generate and share digital books with a subdomain link like mycoolbook.theappsite.com.

However, I've set up the routes so that editing books are at the URL "mycoolbook.theappsite.com/settings."

As it's an angular page, I'm facing hard redirects between these pages, missing out on the single-page application benefits. Is there a way to maintain the app instance running across these pages?

If not, I'm considering moving all admin pages back to a URL like "theappsite.com/book/mycoolbook/settings" instead. Is this feasible?

I've already addressed sessions and AJAX requests working across domains, but it's the state linking that poses a challenge.

Answer №1

Simply put, the answer is no. The URL cannot be changed from book.domain.com to domain.com due to the way angular handles URL manipulation. In hash mode, only the fragment section of the URL can be altered, whereas in HTML5 Mode, only the path, search string, and hash can be modified. If your application is in HTML5 mode, your server must be able to properly map URLs to ensure the correct page (such as index.html) is returned as the URL changes. This would require both DNS locations to serve the same page.

However, you can still send AJAX requests between the two domains as long as you understand how to address cross-domain issues (using methods like JSONP, CORS, etc).

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

Detecting the upcoming click on the document using @HostListener in Angular 4 to dynamically generate a click listener

I'm currently working on a directive that toggles its state when clicked. The desired behavior is for the state to be deactivated if the user clicks anywhere else on the page while it is active. To achieve this, I attempted to use the Renderer2 liste ...

angularjs angular directive angular-directive

Javascript - Issue with Ajax causing additional commas in JSON responses

I'm attempting to send a request to a RESTful server using the HTTP module in Node.js. Due to the large response size (64 chunks, approximately 100kb), the HTTP module combines the chunks into a single string response like this: res.setEncoding(& ...

javascript json ajax

Enabling and Disabling Input Fields Based on Selections in VueJS

Originally submitted on es.stackoverflow.com by José: I came across an example in JavaScript that works, but I'm struggling to implement it in vue.js. I've been attempting it for some time without success. Apologies for any inconvenience. < ...

javascript html vue.js

What steps should I take to ensure that the <select> tag is compatible with Microsoft Edge?

Currently, I am working on editing jsp files that utilize struts1. <html:select property="someProperty" style="width:110;height:110" styleClass="someClass"> However, when viewing it in Microsoft Edge, I noticed that the drop-down menu already ...

javascript html microsoft-edge compatibility struts-1

Error: Unable to locate the store in either the context or props due to an invariant violation

In the development process, I encountered an issue with my code regarding storing and retrieving user information. My scenario involves creating a store in Login.js where the username is sent to the store upon user login. Subsequently, in Profile.js, I aim ...

javascript reactjs react-native redux react-redux

What are the steps to lift non-React statics using TypeScript and styled-components?

In my code, I have defined three static properties (Header, Body, and Footer) for a Dialog component. However, when I wrap the Dialog component in styled-components, TypeScript throws an error. The error message states: Property 'Header' does no ...

javascript reactjs typescript styled-components

Printing the HTML Template of a widget with multiple loops results in a blank first page being displayed

I have encountered an issue while working with a table and ng-repeat loops in my report widget. The table displays fine on the screen, but when I try to print it, there is always a blank page at the beginning. Interestingly, if I remove the second and thir ...

javascript html angular angularjs servicenow

Button in Laravel Vue JS staying enabled after redirection

I am facing an issue with a button on my webpage. Whenever the button is clicked, it should become disabled and have aria-disabled="true" added to it. However, upon page reload, the button does not remain disabled even though I pass a boolean true value to ...

javascript php laravel vue.js vuejs2

Preserve selected value in dropdown menu post form submission

Is there a way to have the selected option displayed on a drop-down list after form submission instead of always showing the first option? <form id="myform" > <label for="selectoption">Departments</label> ...

javascript html model-view-controller

Modify the JSON file without using a library

I am dealing with a file called test.json Here is what it contains: [ { "data_on": { "vals_e": "", "vals_o": "" }, "data_off": { "vals_d": "" ...

javascript node.js json typescript

What is the best method to identify false values within the properties of a series of interconnected objects?

I am currently utilizing the Logical OR (||) operator to verify and assign values if they are not falsy in the following manner: let locationDistrict = result.results[0].address_components[2].long_name || result.resu ...

javascript

Angular 6 - Consistently returning a value of -1

I'm facing an issue with updating a record in my service where the changes are not being reflected in the component's data. listData contains all the necessary information. All variables have relevant data stored in them. For example: 1, 1, my ...

javascript angular typescript angular6

Types of flow. What sets apart type {} from {||}?

I am unsure of the specific distinctions. I am curious about the variations. ...

javascript types flowtype

Error in Angular Universal: KeyboardEvent is not defined

I have inserted the word "domino" into the server.ts file and updated the webpack.server.config.js as follows: module: { rules: [ { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '&bs ...

javascript angular webpack angular-universal universal

Using Javascript to conditionally hide a Vimeo iframe with an if-else statement

Hey amazing developers, I've been working on a cool thumbnail grid with an expanding view. Check out an example here. Within the expander, I added a video section that retrieves its video ID through an HTML5 data-attribute. Here's how it looks ...

javascript vimeo custom-data-attribute

Unable to target a dynamic div and utilize solely its image

Can someone provide some assistance with a jQuery issue I am facing? I have a lengthy list of images directly uploaded from YouTube, each image has the same "v-code" as its corresponding video. To simplify the downloading process for all videos on one page ...

javascript jquery

Attempting to include a standard VAT rate of 5% on the invoice

/* The code format is correct and I don't see any issues on my end, I hope it works well for you. */ I need assistance in adding a fixed VAT (tax) rate of 5%. The tax amount should be displayed on the row, while the total tax should reflect the sum o ...

javascript html css

What is the best way to bring a JavaScript file from the source file into an index.html document

I am currently in the process of developing a system using React, and as someone new to the framework, I have encountered an issue. I need to include a JavaScript file in my index.html that is located within the src folder. This js file is essential for th ...

javascript reactjs

"Encountered a Chrome RangeError: The call stack size limit was exceeded while utilizing jQuery's $

As part of my job, I am currently evaluating a web application that involves fetching a substantial amount of data from the server. The data is received as a JSON object using the $.ajax function. It contains numerous sub-objects which I convert into array ...

javascript jquery google-chrome web-applications browser

Error detected in Deno project's tsconfig.json file, spreading into other project files - yet code executes without issues?

I am working on a Deno project and need to utilize the ES2019 flatMap() method on an array. To do this, I have created a tsconfig.json file with the following configuration: { "compilerOptions": { "target": "es5", ...

javascript typescript visual-studio-code eslint deno

JavaScripter Q&A