Solución:
Logré solucionar este problema, por ejemplo, http: // localhost: 8080 / angular / player / detail / 4 con los siguientes pasos:
1) Cree una aplicación angular con: ng build –prod -bh ./ -d / angular
2) Copie el contenido de la aplicación compilada en $ ApacheLocation / webapps / angular
3) Reescribir la regla:
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/angular/(.*) /angular?path=$1
4) Configure la navegación en app.component.ts:
constructor(private activatedRoute: ActivatedRoute, private router: Router) { }
ngOnInit() {
const path = this.activatedRoute.snapshot.queryParams['path'];
const navigateTo = "https://foroayuda.es/" + path;
if (path) {
this.router.navigate([navigateTo]);
}
}
Puede encontrar el proyecto de prueba aquí: https://github.com/avuletica/test
Explicación de las reglas de reescritura:
# %{REQUEST_PATH} corresponds to the full path that is used for mapping.
# ! NOT character
# '-f' (is regular file) Treats the TestString as a pathname and tests whether or not it exists, and is a regular file.
# ^ matches the beginning of the string or line
# . matches any charceter except line breaks
# * match 0 or more of the preceding token
Entonces, básicamente, si no hay un archivo en / angular / cualquier cosa, tomcat envía la ruta completa como una cadena de consulta a la aplicación angular y desde ese parámetro de consulta, maneja el enrutamiento angular.
Para solucionar el problema del enlace profundo al implementar una aplicación angular (con el enrutamiento PathLocationStrategy) en el servidor apache tomcat (8, 9) –
- Configure RewriteValve en server.xml
- Escriba la regla de reescritura en rewrite.config
server.xml –
...
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
...
</Host>
...
rewrite.config – (nota – / hola / es la ruta de contexto de la aplicación angular en tomcat)
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/hello/(.*) /hello/index.html
He documentado este problema en mi artículo – Solucionar el problema de los enlaces profundos – Implementar la aplicación angular en el servidor Tomcat
Nota: no se necesita una configuración del lado del cliente para lograr esto (aparte de la configuración predeterminada que sale de la CLI). Todo el enrutamiento del lado del cliente es manejado por el módulo Angular Routing.