Угловой 2: Непосредственный вызов URL-адреса не работает

Я создаю небольшое угловое приложение с двумя примерами, где я могу продемонстрировать проблему маршрутизации. Я определяю следующие маршруты:Угловой 2: Непосредственный вызов URL-адреса не работает

@RouteConfig([ 
    { path: "/login", name: "Login", component: Login }, 
    { path: "/sites/site1", name: "Site1", component: Site1 } 
])

Навигация для Сайта 1 со следующей инструкцией работы:

this.router.navigate(["Site1", {}]);

Если я называю сайт прямо из браузера, не работает. В моем случае http://127.0.0.1:8080/static/sites/site1. Но прямо называть сайт для входа напрямую: http://127.0.0.1:8080/static/login

Примечание: В этом случае '/ static' является моей базой href.

Похоже, проблема возникает только на маршрутах, где путь глубже одного уровня. Первый сайт после базового href работает (например, login). Вызов более глубокого сайта не работает (например, сайт/сайты).

Проблема может воспроизведена со следующим приложением: https://github.com/lexon0011/IssueDemonstrator

Clone хранилище, установить узел модули и запустить приложение (см Начала)
Нажмите на кнопку «Показать Site 1»: Вы можно увидеть, что работает маршрутизация
Позвоните по прямой ссылке: Вы можете видеть, что маршрутизация не работает

Любые идеи ???

Спасибо!

источник

2016-05-02 Martin Schagerl

Похоже http://stackoverflow.com/questions/35137573/angular-2-router-es5-doesnt-work-on-page-reload/35137712#35137712 –

Я думаю, что ваша проблема находится на HTML-странице. У вас неправильная настройка пути. Попробуйте изменить indexDev.html следующим образом:

<head> 
    <meta charset="UTF-8"> 
    <title>Issue Demostrator</title> 
    <base href="/static/" /> 
    <!-- Bootstrap stuff --> 
    <script src="/node_modules/jquery/dist/jquery.min.js"></script> 
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" /> 

    <!-- Angular2 stuff --> 
    <script src="/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="/node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="/node_modules/angular2/bundles/http.dev.js"></script> 
    <script src="app/systemConfig.js"></script> 
    <script type="text/javascript"> 
     System 
      .import("appbuild") 
      .catch(console.log.bind(console)); 
    </script> 
</head>

Примечание я добавил баз тега перед вашими ссылками и изменил свои пути.

Я надеюсь, что это помогает вам

источник

2016-05-02 18:22:26 yurzui

Спасибо, с базовым тегом он работает. Günter Zöchbauer: HashLocationStrategy также работает, но мне нужна PathLocationStrategy, потому что я использую OpenId-сервер, который возвращает токен как хэш-фрагмент –

Я думаю, что вы хотите переключиться на HashLocationStrategy

bootstrap(AppCmp, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, {useClass: HashLocationStrategy}) 
]);

по умолчанию является PathLocationStrategy (HTML5 PushState), который нуждается в поддержке сервера.

источник

2016-05-02 17:43:38

'HashLocationStrategy 'преобразует'/pagename' в '/ #/pagename'. Есть ли способ сделать его навигационным для '/ pagename' снова? В Angular 1. * вы можете установить 'html5Mode' и записать несколько строк в' .htaccess', чтобы избавиться от '#'. – Patrick2607

Нет, если вы хотите этого, вам нужно настроить сервер для HTML5 pushState. Если он работает с 'HashLocationStrategy', вы знаете, что это является причиной вашей проблемы. –

Угловой 2: Непосредственный вызов URL-адреса не работает

ответ

Смежные вопросы