Saltar al contenido

Implementar la aplicación angular en el problema de enlaces profundos Apache Tomcat 404

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) –

  1. Configure RewriteValve en server.xml
  2. 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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *