Angular 2 router auxiliary routes not working on redirectTo

Question

I recently started a new project based on angular 2.0.0 in combination with Angular Router (V3.0.0). Thereby I have issues with the auxiliary routes.

I want to split up my application in different views that appear in every state like navigation bar, main content, footer etc. So that when the user interact with the site only the part of the page that needs to be changed (f.e. the content) is changed and all other views are left as they are. Therefore I wanted to use the routers auxiliary feature as discussed in this talk:

Angular Router Talk @AC2015

I set up my files as follows:

app.html

<router-outlet name="navigation"></router-outlet>

<main>
    <router-outlet></router-outlet>
</main>

<router-outlet name="footer"></router-outlet>

app.routes.ts

import {Routes} from '@angular/router';

export const rootRouterConfig: Routes = [
  {path: '', redirectTo: 'start(navigation:/navigation)', pathMatch: 'full'}
];

start.routes.ts

import {Routes} from '@angular/router';
import {StartContentComponent} from './startContent/startContent.component';
import {StartNavigationComponent} from "./startNavigation/startNavigation.component";  

export const startRouterConfig: Routes = [
    {path: 'start', component:  StartContentComponent},
    {path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'}
];

Now the problem is: If I manually enter

http://localhost:3000/#/start(navigation:/navigation)

into the url of the browser both components are displayed correctly. But the redirect in app.routes.ts is not working and I get the following error when accessing http://localhost:3000/#/:

Uncaught (in promise): Error: Cannot match any routes: ''

The official Angular 2 docs say nothing about auxiliary routing yet only that it will be discussed in the future. Apart from that I found some other blogposts but none of them discussed auxiliary routes in combination with redirects.

Does anyone know what my problem is or have similar issues?

Is there another approach to structure my page to achieve what I want?

Should I maybe switch to Ui-router?

Answer 1

I had the same problem, and Mr. Binary's solution seemed to be on the right track, but the 'Componentless Routes' part of this site got me there.

My solution:

export const RedirectionIncludingAuxRoutes: RouterConfig = [
    {
        path: 'redirect-me',
        redirectTo: 'redirected-with-aux'
    },
    {
        path: 'redirected-with-aux',
        children: [
            {
                path: '',
                component: PrimaryComponent
            },
            {
                path: '',
                component: SecondaryComponent,
                outlet: 'auxiliary'
            }
        ]
    }
]

Answer 2

That's recommended approach when you have more changing parts.
Anyway try changing

redirectTo: 'start(navigation:/navigation)'
to
redirectTo: 'start/(navigation:navigation)'

And

{path: 'start', component:  StartContentComponent},
{path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'}
to
{path: 'start', component:  StartContentComponent,
   children: [
      {path: 'navigation', component: StartNavigationComponent, outlet: 'navigation'}
]},

Also i would recommend this article to router:
http://blog.angular-university.io/angular2-router/

Answer 3

You are almost there. Just one step away. You need to wire rootRouterConfig in one of the following ways

import {Routes , RouterModule } from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig)],
  exports: [RouterModule],
})

OR

import {ModuleWithProviders } from '@angular/core';
import {Routes , RouterModule } from '@angular/router';

export const routing: ModuleWithProviders =RouterModule.forRoot(rootRouterConfig);

Let me know which one works for you.