angular 2 new router rc4 child's aux route doesn't work

Question

Aux route inside child route, don't know how to set to let it work. i have root component and route config file like:

root.routes.ts     
 export const rootRoute:RouterConfig=[
       ...ChildrenRoute,
       {path:'',component:ChildrenRootComponent},
       {path:'children-root',component:ChildrenRootComponent},
       {path:'other',component:OtherComponent'}
  ];

 template:
          '<a routerLink='children-root'>Children root</a>
           <a routerLink='other'>Other</a>
           <router-outlet></router-outlet>'

and ChildrenRootComponent have FirstComponent and SecondComponent with routes config file like:

 children.routes.ts    
     export const ChildrenRoute:RouterConfig=[
        {path:"",redirectTo:'/children-root',pathMatch:'full'},
        {path:'children-root',component:ChildrenRootComponent,
               children:[
                    {path:'',component:FirstComponent},
                    {path:'first',component:FirstComponent},
                    {path:'second',component:SecondComponent,outlet:'aux'}
               ]
        }
    ];
template:
         ' <a routerLink='first'>First</a>
              <router-outlet></router-outlet>
           <a routerLink='aux:second'>Second</a>
              <router-outlet name="aux"></router-outlet>'

Now route from Children root -> Second is ok, but route Children root -> first doesn't work show error:

 Error: Cannot match any routes: 'children-root/second'

change template:

   ' <a routerLink='first'>First</a>
          <router-outlet></router-outlet>
     <a routerLink='(aux:second)'>Second</a>
          <router-outlet name="aux"></router-outlet>'

doesn't work too. error:

Error: Cannot match any routes: 'children-root/second)'

pay attention here ')' in error message,and no '(' . directly set url as following in browser

 localhost:4200/children-root/(aux:second)

reload and work well. so i guess i set routerLink wrong, search a lot, no find anything about this.

score 1 · Answer 1 · answered Aug 07 '16 at 13:53

1

RC.4 doesn't support routerLink with aux routes yet. Try something like this:

<a href="/children-root/(aux:second)">Second</a>

answered Aug 07 '16 at 13:53

Yakov Fain

11,972
5
33
38

a href can go to SecondComponent, but browser reload full page, not just load SecondComponent in router-outlet. – PengGang Aug 07 '16 at 14:55
this href shouldn't reload the page. At lease in my app I use HashLocationStrategy and the URL similar to this one doesn't reload the page: ```Second``` – Yakov Fain Aug 08 '16 at 16:58
This is still an issue in RC.5 .. I wonder when this might get solved – Jalal El-Shaer Aug 25 '16 at 13:35

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

Rc4. Doesn't support routerLink properly yet. You can achieve the desired result using navigateByUrl or manual 'a' tag. I assume your first componet is visible when you try to navigate to second. Then try

this.router.navigateByUrl('/children-root/(first//aux:second)');

Or

<a href="/children-root/(first//aux:second)">Second</a>

The explanation of route URL formation can be read at this

edited May 23 '17 at 12:32

Community

1
1

answered Aug 07 '16 at 17:50

Arpit Agarwal

3,993
24
30

how about rc1 and 3.0.0.alpha.x support routerLink better? someone used? – PengGang Aug 07 '16 at 23:47
1

3.0.0.beta2 is latest for router and no earlier version has better support. rest of angular package version is immaterial – Arpit Agarwal Aug 08 '16 at 04:41

score 0 · Accepted Answer · answered Aug 09 '16 at 07:04

0

It has just been fixed. We shall see it working in the upcoming RC.5

related GitHub issue

answered Aug 09 '16 at 07:04

Norbert Korny

938
1
9
8

angular 2 new router rc4 child's aux route doesn't work

3 Answers3