CODEWITHSUNDEEP
angularangular2-routingangular2-router3
Thorsten Westheider
Thorsten Westheider

Reputation: 10932

Angular 2 Router skips redirectTo and uses child route instead

I've been tinkering with RC6 for a while now, hoping that finally routing to nested child components would work out of the box. Well, no such luck. The effect I'm seeing right now is that the redirectTo for the default route is just ignored and instead, Angular goes straight to the first child component.

import { Route, RouterModule } from '@angular/router';
import { LandingPageComponent } from 'src/landing-page.component';
import { DepartmentModule } from 'src/department/department.module';

const routes: Route[] = [
  { path: '', redirectTo: 'landing-page', pathMatch: 'full' },
  { path: 'landing-page', component: LandingPageComponent },
  { path: 'department', loadChildren: () => DepartmentModule }
];

export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(routes, {enableTracing:true});

You should think entering no URL would take me to landing-page, but no, Angular picks department for reasons that are beyond me.

From that point everything works as expected, I can then navigate to a child route

import { Route, RouterModule } from '@angular/router';
import { DepartmentComponent } from './department.component';
import { DepartmentDetailsComponent } from './department-details.component';

const departmentRoutes: Route[] = [
  { path: '', component: DepartmentComponent },
  { path: ':id', component: DepartmentDetailsComponent }
];

export const departmentRouting = RouterModule.forChild(departmentRoutes);

The weird thing here though is, that I need

<a [routerLink]="['../..']">

to navigate 1 level back up. Possibly, both problems are related.

Does anyone have an idea what I'm missing? The plnkr can be found here.

Upvotes: 0

Views: 1230

Answers (1)

micronyks
micronyks

Reputation: 55443

You just need to remove DepartmentModule from imports(from AppMoule's @NgModule()) as shown below,

imports: [ BrowserModule, MdButtonModule, 
           RouterModule, routing]         //<---removed DepartmentModule declaration

working : http://plnkr.co/edit/qoZ3YCwSz0mQ5o974Dt0?p=preview

Upvotes: 4

Related Questions