angular ui router - change - Cómo hacer que el enrutador de UI angular respete las URL "no enrutadas"

ui-router angular 6

Question

Esta es mi primera experiencia con AngularUI Router, así que supongo que estoy cometiendo un error de novato y espero que alguien pueda guiarme.

He configurado una aplicación de una sola página para usar el enrutador de UI angular en modo HTML5 y todo parece funcionar como se esperaba.

.config([
    "$stateProvider", "$urlRouterProvider", "$locationProvider",
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider.state("concept", {
            url: "/concepts/:conceptKey",
            templateUrl: "/templates/concept-view.html",
            controller: "conceptViewController",
            resolve: {
                concept: [
                    "$stateParams", "conceptsApi",
                    function ($stateParams, conceptsApi) {
                        return conceptsApi.getConcept($stateParams.conceptKey);
                    }
                ]
            }
        });

        $urlRouterProvider.otherwise("/");

        $locationProvider.html5Mode(true);
    }
])

Sin embargo, la misma página también contiene algunos enlaces a otras páginas estáticas en el mismo sitio, utilizando direcciones URL relativas. Antes de instalar el enrutamiento angular, estos enlaces funcionaban correctamente, pero ahora están rotos. Específicamente, al hacer clic en cualquiera de estos enlaces, se cambia correctamente la barra de direcciones del navegador, pero no activa la navegación a esa página de destino.

Supongo que debo agregar algo para indicar a la configuración de enrutamiento que ignore ciertos patrones de URL, pero no he encontrado ninguna información que me muestre cómo hacerlo. ¿Alguna sugerencia por favor?

Gracias tim

Answer 1

Después de algunas investigaciones, descubrí que este problema no está específicamente relacionado con el enrutador de interfaz de usuario angular. El mismo comportamiento también está presente en el mecanismo de enrutamiento AngularJS nativo y es causado por la lógica de reescritura de enlaces implementada por $location , como se describe en esta documentación .

Más discusión del problema está here .

Encontré dos soluciones posibles, las cuales parecen funcionar bien:

Dirija explícitamente los enlaces a páginas estáticas : al incluir el atributo target="_self" en cualquier enlace a páginas estáticas (es decir, las páginas que quedan fuera del esquema de enrutamiento angular definido), AngularJS las ignorará y, por lo tanto, se procesarán correctamente.

Deshabilitar la reescritura de enlaces : al configurar el enrutamiento angular en modo HTML5, se admiten dos formatos de sintaxis. El formato más simple ...

$locationProvider.html5Mode(true);

... habilita el modo HTML5 con la configuración por defecto. Sin embargo, la sintaxis de formato largo proporciona acceso a propiedades de configuración adicionales, una de las cuales resuelve el problema anterior al deshabilitar el comportamiento predeterminado de Angular de interceptar y volver a escribir las URL de los enlaces:

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
    rewriteLinks: false
});

Utilicé la segunda solución y parece que no tiene ningún efecto adverso en el comportamiento de las URL definidas en el esquema de enrutamiento. Esta solución parece funcionar igualmente bien con Angular UI Router y con enrutamiento AngularJS nativo.