CODEWITHSUNDEEP
angularangular2-routing
Jorin
Jorin

Reputation: 1336

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

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.

Upvotes: 4

Views: 2034

Answers (2)

Jorin
Jorin

Reputation: 1336

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

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202138

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:

Upvotes: 3

Related Questions