We are using angular 6.
I want to create another angular app and put in in the same domain, here is the example
example.com is the main app, my new app will be hosted on
example.com/app2/
Here is what my apache configuration looks like
<VirtualHost>
ServerName example.com
...
ProxyPass /app2/ http://app2-server:4200/
ReverseProxyPass /app2/ http://app2-server:4200/
ProxyPass / http://main-app-server:4200/
ReverseProxyPass / http://main-app-server:4200/
...
</VirtualHost>
Now when I try to access new app, it creates the problem to download files because
the angular app will insert following files in index.html
main.js vendor.js styles.js etc.
Now the request of main.js from example.com/app2/ will go to example.com/main.js because angular build process automatically adds main.js in index.html
Is there a way to say angular that instead of adding <script type="text/javascript" src="main.foo.js"></script> my app needs to add <script type="text/javascript" src="/app2/main.foo.js"></script>
I understand this can be done on build process. But these are not the only files. There are chunk files which webpack refers and downloads dynamically. Those reference needs to change too.
Also developers use dev-server not build flow. So this path change needs to be part of dev-build too.
So the question is, is there a way to set path of these auto generated files (including webpack chunks)?
P.S. I use angular 6 but app2 can be upgraded to angular 9/10.
You can just add
ng build --prod --base-href /app2/
Into your build command, Or I’m pretty sure you can configure this in angular.json under build.options.baseHref
Regarding the dev server, I’m not sure why this would matter. So I’ll need more detail there on what you’re trying to accomplish. If you’re hoping to run two projects at once, that’s a different story as you can’t have two local servers listening on 4200.