angular2(2.0.0-beta.3) routing by url not working

Question

Currently I am playing with angular2 routing. Every thing is working as expected but manually typing the route url in browser is not working.

The current code I am using

app.ts

    import {Component} from 'angular2/core';
    import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {UsersComponent} from "./user/users.component";


    @Component({
        selector:'app',
        template:`
        <h1>{{title}}</h1>
        <nav>
          <a [routerLink]="['Dashboard']">Dashboard</a>
          <a [routerLink]="['Users']">Users</a>
        </nav>
        <router-outlet></router-outlet>
        `,
        directives:[ROUTER_DIRECTIVES],
        providers:[ROUTER_PROVIDERS]
    })


    @RouteConfig([
        new Route({
            path:'/dashboard',
            component:DashboardComponent,
            name:'Dashboard',
            useAsDefault:true
        }),
        new Route({
            path:'/users',
            component:UsersComponent,
            name:'Users'

        })

    ])
    export class App{

    }

boot.ts

    import {bootstrap} from 'angular2/platform/browser';
import {App} from "./app";
import {HashLocationStrategy} from "angular2/router";
import {LocationStrategy} from "angular2/router";
import {ROUTER_PROVIDERS} from "angular2/router";
import {provide} from "angular2/core";


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

Routing using the anchor tags is working perfectly fine but when I manually types the same url(http://localhost:3000/users or http://localhost:3000/dashboard) in browser and hit enter it says

Cannot GET /users   

or 

Cannot GET /dashboard

Please suggest me how can I detect the browser's location URL changes to match the path segment (/users or /dashboard) and activate the corresponding Component(or UsersComponent or DashboardComponent) and display its view.

Possible duplicate of [Angular 2.0 router not working on reloading the browser](http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser) — Günter Zöchbauer, Feb 13 '16 at 17:14
My question is not (Angular 2.0 router not working on reloading the browser) it is (after defining the angular route, It is not working by directly typing in browser though it is working with anchor tag ) — Jorin, Feb 13 '16 at 17:27
To your update. The URL is invalid when you use `HashLocationStrategy`. That's what `HashLocationStrategy` and the default `PathLocationStrategy` are about, they work with different URL patterns to point to routes. — Günter Zöchbauer, Feb 13 '16 at 17:39
@pardeep reloading comes only after loading it ..... I am asking It is not being loaded your all are telling it all about reloading which dont work simply on HTML5 and needs some server based route mapping to index.html ... LoL — Jorin, Feb 13 '16 at 17:42
@GünterZöchbauer means I had to use PathLocationStrategy to work with my type of url http://localhost:3000/dashboard also I tried changing the url to http://localhost:3000/#/dashboard for my above updated code but it is also not working — Jorin, Feb 13 '16 at 17:46
Yes, and if you use `PathLocationStrategy` you need to use a server that supports it. I don't know if `http://localhost:3000/#/dashboard` is a valid route for `HashLocationStrategy`. Load your index.html and navigate to the route in question and then check what URL Angular produces. — Günter Zöchbauer, Feb 13 '16 at 17:49
Just by moving the HashLocationStrategy from boot.ts to app.ts — Jorin, Feb 13 '16 at 18:04
see http://stackoverflow.com/a/41030337/1090745 to learn how to use HashLocationStrategy — felipecrp, Dec 08 '16 at 01:34

score 3 · Answer 1 · edited May 23 '17 at 12:09

3

It's something normal since by default, HTML5 history is used for routing with Angular2. You need a server configuration to redirect all your routes to the HTML entry file.

You could have a look at this answer:

Angular 2 : 404 error occur when i refresh through Browser

edited May 23 '17 at 12:09

Community

1
1

answered Feb 13 '16 at 17:17

Thierry Templier

198,364
44
396
360

hey Thierry Templier thanks for your reply... I followed the link you supplied and modified by boot.ts as below ` import {bootstrap} from 'angular2/platform/browser'; import {App} from "./app"; import {HashLocationStrategy} from "angular2/router"; import {LocationStrategy} from "angular2/router"; import {ROUTER_PROVIDERS} from "angular2/router"; import {provide} from "angular2/core"; bootstrap(App, [ ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}) ]);` But it did not help me – Jorin Feb 13 '16 at 17:31

score 0 · Answer 2 · answered Feb 13 '16 at 18:13

Finally I figure out a solution . Solution was to use HashLocationStrategy like below

app.ts

 import {Component} from 'angular2/core';
    import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {HashLocationStrategy} from "angular2/router";
import {LocationStrategy} from "angular2/router";
import {provide} from "angular2/core";

import {DashboardComponent} from "./dashboard/dashboard.component";
import {UsersComponent} from "./user/users.component";


    @Component({
        selector:'app',
        template:`
        <h1>{{title}}</h1>
        <nav>
          <a [routerLink]="['Dashboard']">Dashboard</a>
          <a [routerLink]="['Users']">Users</a>
        </nav>
        <router-outlet></router-outlet>
        `,
        directives:[ROUTER_DIRECTIVES],
    providers:[HeroService,ROUTER_PROVIDERS,provide(LocationStrategy, {useClass: HashLocationStrategy})]
    })


    @RouteConfig([
        new Route({
            path:'/dashboard',
            component:DashboardComponent,
            name:'Dashboard',
            useAsDefault:true
        }),
        new Route({
            path:'/users',
            component:UsersComponent,
            name:'Users'

        })

    ])
    export class App{

    }

boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from "./app";
bootstrap(App);

Thank you

angular2(2.0.0-beta.3) routing by url not working

2 Answers2