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.
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?
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.
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.