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: https://stackoverflow.com/a/40421975/4036999 — saravana priyan, Sep 23 '21 at 05: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, Sep 23 '21 at 05:45
@saravanapriyan sorry do not want to useHash. We cannot modify App1 too — ove, Sep 23 '21 at 05:46
Without modifying, only options we came across were useHash & iframe. — saravana priyan, Sep 23 '21 at 05:53
I might have to end up building as App2 as a angular module within App1 — ove, Sep 24 '21 at 04:00
are yo sure you need that `deploy-url` option? I have somewhat the same usecase and only need the `base-href`. — Robin Dijkhof, Sep 28 '21 at 07:16
Yes I need the deploy URL or else the CSS and images won’t be loaded.How do you get your app B to work? — ove, Sep 28 '21 at 07:51
@ove Basically got the same set up as you do but without the deploy URL. In the file server of app1 I have an porxypass and proxyreversepass to the fileserver of app2 — Robin Dijkhof, Sep 30 '21 at 17:57

H3AR7B3A7 · Answer 1 · 2021-09-25T12:33:35.240

1

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 '21 at 12:33

answered Sep 25 '21 at 11:34

H3AR7B3A7

4,366
2
14
37

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 – H3AR7B3A7 Sep 25 '21 at 11:35
Interesting. Not sure what proxy config. Will try it out – ove Sep 25 '21 at 13:32
Reading through angular documentation I don’t think proxy is for this purpose? – ove Sep 25 '21 at 15:35
Your application isn't going to know it is served on "" by itself though ... I am using it effectively to serve on http://localhost:4200/subfolder instead of http://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 Sep 25 '21 at 16:52
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. – H3AR7B3A7 Sep 25 '21 at 17:04

kian · Answer 2 · 2021-09-30T08:00:29.767

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 '21 at 08:00

answered Sep 30 '21 at 07:47

kian

1,449
2
13
21

My issue the 404 routes in app1 overwritten the 404 routes in App2 – ove Oct 01 '21 at 21:20

Angular application in a subfolder routing issue

2 Answers2