Angular 2 PathLocationStrategy y Asp.Net Core Mvc

Si has hosteado una aplicación de angular 1 o angular 2 en Asp.Net Core Mvc una de las cosas con las que te habrás peleado es con la configuración del routing de cliente.

En angular 1, por defecto se utiliza el # como separador para identificar la parte de la url que define la ruta de cliente, pero en angular 2, ya no es así, y no se utiliza ningún separador (aunque se puede cambiar para que vuelva a utilizar el #).

Así, una ruta que en angular 1 podría ser http://myapp.com/#ruta/local, por defecto en angular 2 sería http://myapp.com/ruta/local.

Esto supone un problema cuando se realiza la petición al servidor, ya que como es una ruta normal (sin #), el framework intentará buscar el controlador y el método de acción pare devolver el Html generado, pero en realidad no va a existir y recibiremos un bonito 404.

Hay varias opciones para configurar el framework para que soporte routing de cliente, pero la más sencilla es usar el paquete de NuGet Microsoft.AspNetCore.SpaServices.

Entre otras cosas, nos ofrece un método de extensión sobre IRouteBuilder para registrar un controlador y método de acción que sirva de fallback para todas las rutas de cliente que no sepa encontrar.

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
});

En esta aplicación, la página que contiene la SPA se sirve desde el controlador HomeController y la acción Index. Así que cualquier ruta que no se corresponda con un controlador y método de acción existente, entenderemos que forma parte de la SPA. Por lo tanto, devolveremos el punto de entrada de la SPA para que angular, en este caso, pueda gestionar sin problemas la parte de la url que corresponda al routing local.

Si estás trabajando con Asp.Net Core Mvc y angular (o React, o Knockout…), te recomiendo que te pases por este repo de GitHub https://github.com/aspnet/JavaScriptServices y revises algunas joyitas interesantes que aparecen por allí.

¡Que lo disfrutes!

Deja un comentario

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