Angular 4延迟加载路由-子级不加载

Question

I have a lazy load component, and I have an issue with routing inside of it.

the routes look like this:

    const routes:  Routes {
      {path: '': component: ReportsComponent, children:[
         {path: '', component: DeviceReportComponent},
         {path: 'sites', component: SiteReportComponent},
         {path: 'devices', component: DeviceReportComponent}
      ]}
    }

now when I navigate to the component, the first route loads perfectly, but any navigation attempt after that is ignored.

any ideas?

Answer 1

I can imagine that having two empty paths routing to two different component would cause problems. this training shows that the root empty path always routes to a named route with a component:

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: Overview },
      { path: 'specs', component: Specs }
    ]
  }
];

You could try to stick to that template.

Answer 2

ok

after some digging in the code, found the error: in the main router, I had reports/:type , where the :type obviously had no place there...