2

I'm using Angular2 beta.14.

What I want to do is creating a dummy login and then redirecting user to the protected overview page which has links to other components.

Like this,

  1. before login, visit localhost:3000/ or any protected pages will be redirected to localhost:3000/dummylogin

  2. after users login, redirect user to localhost:3000/overview

Right now, I have

app.component - contains route config for /dummylogin

overview.component - contains route config for /update etc.

dummy-login.component - contains route config for /overview

In the login component, I tried to use this.router.navigateByUrl(['Overview']) to redirect user to the Overview component after doing dummy authentication. But I got this error 

ORIGINAL EXCEPTION: Child routes are not allowed for "/dummylogin".    
Use "..." on the parent's route path.

This error msg doesn't make sense to me. And, I'm not sure if I'm on the right direction. Any ideas will be appreciated.

Improve this question

3 Answers 3

Reset to default
1

Child routes are not allowed for "/dummylogin". Use "..." on the parent's route path.

As its clear from the error you have to define child routing in order to make your app work, so you have to add /... in the add of routing of dummylogin like this

@RouteConfig([
{ path: '/dummylogin/...', as: 'DummyLogin', component: DummyLogin}
])

so as per angular2's routing rule you have to define one route at the time of child routing or to useAsDefault: true

so in the dummylogin you have to define routing and define at lease one default route like this - 

@RouteConfig([
{ path: '/overview', as: 'overview', component: overview, useAsDefault : true}

....

])

see also

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This solution answers my question though I currently realize that my routing design was bad. Right now, I add route config for /DummyLogin and /RouteDispatcher in the root app component. And the RouteDispatcher component contains child route config for other components like /Overview etc.
0

So you start with /, then go to /dummylogin and then try to go /dummylogin/overview - child route, perhaps its treated as relative path without slash. I guess you should use this.router.navigateByUrl(['/Overview']).

Improve this answer

1 Comment

may be it is case-sensitive also, check that router config and url match: Overview->overview.
0

Since dummy login routes are child routes of parent app component, you'll need to specify that in the app's RouteConfig. This is done by adding /... to the end of that route's path.

Example:

@RouteConfig([
   { path: '/dummylogin/...', as: 'DummyLogin', component: DummyLogin }
])
export class AppComponent {
...
}

edit:

I don't think you want to have overview as a child route of dummylogin though, so what you'll want is to define both routes in the RouteConfig of the parent app component and access the router in the login component using dependency injection. I've made a plunker example

Improve this answer

2 Comments

Well, I tried it which prompts "link does not resolve to a terminal instruction". Then I added useAsDefault: true to the route config of dummy-login.component. Then, the login page appears but it's url is http://localhost:3000/dummylogin/overview
The way it's been setup with overview as a child route of dummylogin that's how the route will resolve. Chances are you want to have a flat routing system where overview is not a child route of dummylogin. In this case you don't need a RouteConfig decorator on the DummyLogin component. I've updated the original answer with the link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.