Angular 2 Router跳过redirectTo并改用子路由

Question

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.

Answer 1

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