0

When reloading the page with a routes child route it does not load the component due to the nature of the component, but it does not even route back to the main route. First, Is this supposed to be handled by me or is take care of by angular?

Update: Hashstrategy did not work the way expected for second question. In case of first I have route /users/... and a child /users/vote . When reloading /users it goes to /login but when reloading /users/vote it does not reload to that component (naturally) and does not go to /login as well

Update

@RouteConfig([
  {path: '/vote', component: VoteComponent, name: 'VoteCmp',useAsDefault: true },
  {path: '/getapproval', component: GetapprovalComponent, name: 'GetapprovalCmp' },
  {path: '/userresults', component: ResultsComponent, name: 'UserresultsCmp' }
])
@Component({
  selector: 'users',
....
 directives: [ROUTER_DIRECTIVES, RouterLink]
})

export class UsersComponent{

    constructor(private _userdetails: Userdetails, private _router: Router){
      if (this._userdetails.usertypeDetails() === "" || this._userdetails.isLoggedin() === false){
          this._router.navigate( ['HomeCmp'] );
      }
      if(this._userdetails.usertypeDetails() === 'admin'){
          this._router.navigate( ['AdminCmp'] );
      }
  }
}

My vote component

@Component({
  selector: 'vote',
  template: `<div>Vote Component</div>`,
})
export class VoteComponent {

constructor(private _userdetails: Userdetails, private _router: Router){
      if (this._userdetails.usertypeDetails() === "" || this._userdetails.isLoggedin() === false){
          this._router.navigate( ['HomeCmp'] );
      }
      if(this._userdetails.usertypeDetails() === 'admin'){
          this._router.navigate( ['AdminCmp'] );
      }
}

}

My boot.ts has this

bootstrap(MainComponent,[Userdetails,ROUTER_PROVIDERS, Location, provide(LocationStrategy, {useClass: HashLocationStrategy}, ROUTER_BINDINGS, bind(APP_BASE_HREF).toValue('/')]);
Gary
  • 2,293
  • 2
  • 25
  • 47
  • Looks like a dup of http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser. If not please provide more information. – Günter Zöchbauer Feb 25 '16 at 11:46
  • `HashLocationStrategy` is supposed to fix the first issue. It's not related to "otherwise". Actually I have no idea what this question is about. Please add some code that shows what you actually try to accomplish. – Günter Zöchbauer Feb 25 '16 at 11:53
  • What do you mean by *due to the nature of the component* and *it does not reload to that component (naturally)*? – Sasxa Feb 25 '16 at 11:58
  • I have created the component to redirect to login page in /users and /users/vote if username is set as blank (which it is when you reload the page). /users work fine but child of it /users/vote does not redirect. – Gary Feb 25 '16 at 11:59
  • I don't see why it wouldn't activate `/users/vote`... Try logging something in the constructors to see what component/route is activated when you reload. – Sasxa Feb 25 '16 at 12:18
  • tried location.path() in /users and pah loaded right -> This loads users and redirects correctly to /login. But the child route /users/vote gives error `Error: Unable to load script http://localhost:3000/users/client/boot.js(…)` The path is the same for /users as well which is bind(APP... ('/')) like above – Gary Feb 25 '16 at 12:33
  • 2
    Try adding `` to the html, there seams to be a bug with `APP_BASE_HREF`. I had [similar issue](http://stackoverflow.com/q/35392186/1876949). – Sasxa Feb 25 '16 at 13:01
  • Thanks worked, it does seem to be a base path issue with child's child (nested route) – Gary Feb 25 '16 at 13:12

1 Answers1

3

As mentioned in the comments there's a bug with APP_BASE_HREF and nested routes (possibly issue #5782).

Solution (for now) is to add base tag to main html:

<base href="/">
Sasxa
  • 40,334
  • 16
  • 88
  • 102