CODEWITHSUNDEEP
typescriptangular
Amelina
Amelina

Reputation: 172

Route with children cannot be match, when navigating to it

Good day. I can't understand how new routes with children work in Angular 2 rc 4. I want to route to TestComponent, which have child, but error "cannot match any route 'test'" appear. I do routing this way: this.guide.navigate(['test']);. This is how I declare my routes:

const routes: RouterConfig = [
    {
        path: '',
        component: LogInComponent
    },
    {
        path: 'pin',      
        component: PinComponent,    },
    {
       path: 'test',
       component: TestComponent,
       children: [
        {
            path: '/:page',
            component: FoodComponent
        }
      ]
    }  
]

export const mainRouterProviders = [
  provideRouter(routes)
];

I cannot use some page by default in test (like "path: '/'") because its children are like tabs and their list loading in TestComponent's constructor.

Upvotes: 1

Views: 76

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657308

There are a few things

  • add pathMatch: 'full', to the first route, otherwise for example /ping will search for child route ping in LogInComponent

  • add a default route to test that redirects to some default id or some dummy component. Angular doesn't like if a component has <router-outlet> but no route to add a component.

const routes: RouterConfig = [
    {
        path: '',
        pathMatch: 'full',
        component: LogInComponent
    },
    {
        path: 'pin',      
        component: PinComponent,    },
    {
       path: 'test',
       component: TestComponent,
       children: [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'myDefaultId'
            // or 
            // component: DummyComponent
        },
        {
            path: '/:page',
            component: FoodComponent
        }
      ]
    }  
];

Upvotes: 2

Related Questions