1

My app has private and public parts.

If user not logged in then he should see landing page with some 'about text', facebook/twitter links and a link to login/register as a root page of application.

If he is logged in - he should get a dashboard page filled with user specific data as a root of whole application.

And surely, it would be nice to have both of these pages handled by one root route "/".

So i wonder, what is the right way to implement it with angular 2+ and native router?

export const ROUTES: Routes = [{
    path: '/',
    component: isAuthenticated() ? DashboardComponent : LandingPageComponent
}]
Aleksey Temnov
  • 96
  • 1
  • 4

1 Answers1

0

Consider using a canActivate guard:

export const ROUTES: Routes = [
    {path: '/', canActivate: [AuthGuard], component: LandingPageComponent},
    {path: '/landing', component: LandingPageComponent}
},

]

In the guard you can check for a login and reroute to the Landing page.

DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • 1
    Yep, it was the first thing I considered. The thing is - I want both components on root route "/". – Aleksey Temnov Jun 09 '17 at 16:13
  • I just don't think that is currently possible with the router. You could submit an issue with a feature request in github: https://github.com/angular/angular – DeborahK Jun 09 '17 at 16:32
  • Or you could get a bit more complex and use the dynamic component loader: https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html But I believe this is done with selectors and not with routing. – DeborahK Jun 09 '17 at 16:33
  • hey, @DeborahK you got solution for it? – chintan adatiya Nov 08 '17 at 11:40
  • Have you seen this: https://stackoverflow.com/questions/34660263/angular2-conditional-routing – DeborahK Nov 08 '17 at 17:01