Angular 2: Directly calling a URL does not work

Question

I create a small angular 2 sample app, where I can demonstrate a routing problem. I define the following routes:

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

Navigation to Site1 with the following instruction works:

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

If I call the site directly from the browser doesn't works. In my case http://127.0.0.1:8080/static/sites/site1. But calling the login site directly works: http://127.0.0.1:8080/static/login

Note: In this case '/static' is my base href.

It seems as the problem only occurs on routes, where the path is deeper than one level. The first site after the base href works (e.g login). Call a deeper site doesn't work (e.g site/sites).

The problem could reproduced with the following app: https://github.com/lexon0011/IssueDemonstrator

Clone the repository, install node modules and start the app (see Get started)
Click the button "Show Site 1": You can see that the routing works
Call the url directly: You can see that the routing doesn't works

Any ideas???

Thanks!!

Looks like http://stackoverflow.com/questions/35137573/angular-2-router-es5-doesnt-work-on-page-reload/35137712#35137712 — Günter Zöchbauer, May 02 '16 at 17:41

score 0 · Answer 1 · answered May 02 '16 at 17:43

0

I think you want to switch to HashLocationStrategy

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

default is PathLocationStrategy (HTML5 pushState) which needs server support.

answered May 02 '16 at 17:43

Günter Zöchbauer

623,577
216
2,003
1,567

`HashLocationStrategy` transforms `/pagename` into `/#/pagename`. Is there a way to make it navigable to `/pagename` again? In Angular 1.* you could set the `html5Mode` and write a few lines in the `.htaccess` to get rid of the `#`. – Starfish May 02 '16 at 19:25
No, if you want this you need to configure the server for HTML5 pushState. If it works with `HashLocationStrategy` you know that this is the cause of your issue. – Günter Zöchbauer May 02 '16 at 19:28

score 0 · Accepted Answer · answered May 02 '16 at 18:22

I think that your problem is located on HTML page. You have wrong path configuration. Try change indexDev.html following way:

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

Notice i've added base tag before your links and changed their paths.

I hope it helps you

Thanks, with the base tag it works. Günter Zöchbauer: The HashLocationStrategy also works, but I need PathLocationStrategy because I use an OpenId Server which returns the token as hash fragment — Martin Schagerl, May 04 '16 at 18:51

Angular 2: Directly calling a URL does not work

2 Answers2