SPA / Angular will forcefully set browser url

Let me know what tech you're using (React, Vue, etc.) — I can give you an exact code fix.

You said:

if same angular spa mapped into two different directory it will use second directory as url

ChatGPT said:

Yes — if you serve the same Angular SPA from two different URLs (e.g., /folder1 and /folder2), and both are mapped to the same physical files, then:

✅ Angular will use the URL you loaded the app from as its base

So if you open:

bash
http://localhost:8080/folder2

Then Angular will (by default) treat /folder2 as the app's root — not /folder1.

 So here’s what controls Angular’s behavior:

1. <base href="..."> in index.html

This is injected during build. By default, Angular uses:

html
<base href="/">

But if you built it like:

bash
ng build --base-href /folder1/

Then the output will contain:

html
<base href="/folder1/">

And now if you serve that same app at /folder2, Angular will say:

“Whoa — I’m at /folder2, but I think I belong in /folder1,” and it'll start rewriting URLs or routing weirdly.

---

🧼 Fix: Use relative base href or match it dynamically

✅ Option 1: Build once per mount path (cleanest)

If you want to serve Angular at both /folder1 and /folder2, the most correct approach is to build two versions:

bash
ng build --base-href /folder1/ --output-path dist/folder1
ng build --base-href /folder2/ --output-path dist/folder2

Then serve dist/folder1 at /folder1 and dist/folder2 at /folder2

---

✅ Option 2: Use relative base href (experimental)

In index.html:

html
<base href="./">

This makes Angular use the current path (more flexible), but it can break lazy loading or deep routing depending on your setup.

Angular deploy a secondary project

 permanet:

In your seondaryproject :

angular.json

"architect": { "build": { "options": { "outputPath": "dist/your-app-name", "baseHref": "/demo/", "deployUrl": "/demo/" }

• --base-href=/demo/: Specifies the base URL for the application’s routing (i.e., how Angular handles navigation).
• --deploy-url=/demo/: Specifies the URL path for static assets (JavaScript, CSS, images, fonts, etc.).

Temporary(for ng build only)

ng build --base-href=/demo/ --deploy-url=/demo/

The configure web server to map a dir for this project

2023 install nvm, node, angular cli

 install node/nvm

-----------------

!!!!!!!!!!!For which node / angular cli to install check project angular and angular version at 

https://angular.io/guide/versions

-----------------

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

source ~/.bashrc

nvm list-remote

nvm install v16.14.0

nvm list

nvm use 16.14.0

-----------------

Install angular CLI global(will install angular with it)

# install a version that is compatibile with your node above !!!!!!!!!!

# ALSO need to check ur project angular

# compatiblity list : https://angular.io/guide/versions

npm i -g @angular/cli@12.2.2

-----------------

make sure you install globally!!

remove angualr CLI :

https://stackoverflow.com/questions/43344600/how-to-install-a-specific-version-of-angular-with-angular-cli

npm uninstall -g angular-cli

https://stackoverflow.com/questions/41026895/checking-version-of-angular-cli-thats-installed

angular cli version

ng v