Angular application in a subfolder routing issue

Question

It is a bit of weird situation but we have to structure the two angular app as below.

App1 being the main angular app situated at the root and other angular app is in a subfolder.

http://www.example.com - App1
http://www.example.com/subfolder - App2

All is working well except for the routing in App2 since it is overridden by the routes config in Main app.

I am able to use the command below to build/deploy and appears to be working for App2 (subfolder)

ng build --prod --base-href /subfolder/ --deploy-url /subfolder/

App1 is configured to have unknown routes redirected to a 404 page like below

{ path: '**', redirectTo: '/404' }

The issue with if I refresh the page on App2. it got redirected to the 404 page defined in App1. eg. http://www.example.com/subfolder/route1

How can I tell angular in App1 to ignore anything under subfolder and use its own angular routes in App2?

We have been trying to achieve this recently. Using a relative base-href didn't work when we navigated in App2 routes. We had to use absolute URL. As for skiping App1 route for a specific route, you could try something like this: stackoverflow.com/a/40421975/4036999 — saravana priyan
– saravana priyan, Commented Sep 23, 2021 at 5:41
Easiest way is to use useHash option for navigation in both apps, if it's not a problem to have hash navigation. — saravana priyan
– saravana priyan, Commented Sep 23, 2021 at 5:45
I might have to end up building as App2 as a angular module within App1 — ove
– ove, Commented Sep 24, 2021 at 4:00

H3AR7B3A7 · Accepted Answer · 2021-09-25 12:33:35Z

1

+50

I'm not sure if this will work or if it is helpful at all. But when using a base href like:

<base href="/subfolder/" />

I had to create a proxy configuration e.g.:

proxy.conf.json

{
  "/subfolder/*": {
    "target": "http://localhost:4200",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/subfolder": ""
    }
  }
}

And serve it using this proxy configuration:

ng serve --proxy-config proxy.conf.json

In angular.json you can also add proxy configurations:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}
...
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}

You can find more information here.

edited Sep 25, 2021 at 12:33

answered Sep 25, 2021 at 11:34

H3AR7B3A7

5,3593 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

H3AR7B3A7 Over a year ago

If this isn't helpful at all, let me know and I'll redact my answer, I just thought I'd share. This was new to me when I ran into it. XD

ove Over a year ago

Interesting. Not sure what proxy config. Will try it out

ove Over a year ago

Reading through angular documentation I don’t think proxy is for this purpose?

H3AR7B3A7 Over a year ago

Your application isn't going to know it is served on "<base href="/subfolder/" />" by itself though ... I am using it effectively to serve on localhost:4200/subfolder instead of localhost:4200. I think the second application could be on another port and map to the subfolder address. I actually do think this could solve your problem. I would have to ask some1 with more experience to be sure though.

H3AR7B3A7 Over a year ago

Your exact situation isn't described in the angular documentation, but that doesn't mean it couldn't solve your issue. It's not all that usual to have different applications on the same web address. Either you include it in the application or your application runs elsewhere and you proxy to it. At least that is what I think. I could be wrong. I'll leave my answer for now so someone may add to it, confirm it or rule it out.

kian · Accepted Answer · 2021-09-30 08:00:29Z

0

I had the same problem in one project and handled this issue by using <a href=""></a> instead routerLink for routing between projects.

Another way is using Angular workspace to merge all projects in one.

edited Sep 30, 2021 at 8:00

answered Sep 30, 2021 at 7:47

kian

1,7833 gold badges15 silver badges26 bronze badges

1 Comment

ove Over a year ago

My issue the 404 routes in app1 overwritten the 404 routes in App2

Collectives™ on Stack Overflow

Angular application in a subfolder routing issue

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related