Es una situación un poco extraña, pero tenemos que estructurar las dos aplicaciones angulares como se muestra a continuación.
App1 es la aplicación angular principal situada en la raíz y otra aplicación angular está en una subcarpeta.
Todo funciona bien, excepto el enrutamiento en la aplicación 2, ya que la configuración de rutas en la aplicación principal lo anula.
Puedo usar el siguiente comando para construir/implementar y parece estar funcionando para App2 (subcarpeta)
ng build --prod --base-href /subfolder/ --deploy-url /subfolder/App1 está configurada para tener rutas desconocidas redirigidas a una página 404 como la siguiente
{ path: '**', redirectTo: '/404' }El problema si actualizo la página en App2. fue redirigido a la página 404 definida en App1. p.ej. http://www.ejemplo.com/subcarpeta/ruta1
¿Cómo puedo decirle a angular en la aplicación 1 que ignore cualquier cosa en la subfolder y use sus propias rutas angulares en la aplicación 2?
No estoy seguro de si esto funcionará o si es útil en absoluto. Pero cuando se usa un href base como:
<base href="/subfolder/" />Tuve que crear una configuración de proxy, por ejemplo:
proxy.conf.json
{ "/subfolder/*": { "target": "http://localhost:4200", "secure": false, "logLevel": "debug", "changeOrigin": true, "pathRewrite": { "^/subfolder": "" } } }Y servirlo usando esta configuración de proxy:
ng servir --proxy-config proxy.conf.json
En angular.json también puede agregar configuraciones de proxy:
"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" } }Puede encontrar más información aquí .
Tuve el mismo problema en un proyecto y manejé este problema usando <a href=""></a> en lugar de routerLink para el enrutamiento entre proyectos.
Otra forma es usar el espacio de trabajo Angular para fusionar todos los proyectos en uno.