angular - Angular2- When refresh the page, url remains same but appropriate view doesn't get loaded -


in angular2, facing issue. when refresh page. url remains same doesn't load appropriate view in routeroutlet.

everything works fine except refreshing page issue.

app.ts

import {component,bind} 'angular2/core';  import {bootstrap} 'angular2/platform/browser'; import {form_directives} 'angular2/form'; import{homecmp} 'angular/src/home/home.ts'; import {contactuscmp} 'angular/src/contactus/contactus.ts';  import {router,router_providers,routeconfig, router_directives,app_base_href,locationstrategy,routeparams,router_bindings} 'angular2/router'; @component({ selector: 'micropuppy-app', templateurl: "angular/templates/home.html", directives:[homecmp,router_directives,contactuscmp], template: ` <nav>                     <ul class="nav navbar-nav">                     **<li><a [routerlink]="['home']">one</a><hr/></li>                      <li><a [routerlink]="['contactus']">contact us</a></li>**                     <li class="dropdown">                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">technologies <span class="caret"></span></a>                         <ul class="dropdown-menu">                             <li><a href="#">angular</a></li>                             <li><a href="#">.net</a></li>                         </ul>                     </li>             </ul>         </nav>      <router-outlet></router-outlet>`  })  @routeconfig([   {path:'/home', name: 'home', component: homecmp}   {path:'/contactus', name: 'contactus', component: contactuscmp} ])  export class micropuppyapp {     constructor(){         console.log("micropuppy app started");     } }  bootstrap(micropuppyapp, [router_providers,bind(app_base_href).tovalue(location.pathname)]);

with default strategy (html5 history api) of routing, need server configuration redirect paths html entry point file. hashbang approach it's not necessary... if want switch approach, use following code:

import { bootstrap } "angular2/platform/browser"; import { provide } "angular2/core"; import {   router_providers, locationstrategy, hashlocationstrategy } "angular2/router";  bootstrap(mainapp, [   router_providers,   provide(locationstrategy, {useclass:hashlocationstrategy}); ]);

you have @ these questions issue:

hope helps you, thierry


Comments

Post a Comment