title: how to define angular 6 route for multiple level path
body: <p>I want to define multiple level route in angular 6, this is what I need:</p>
  
  <p>for first level routes, I have:</p>
  
  <pre><code>dashboardRoutes:Routes=[
      {
          path: "dashboard",
          component: DashobardComponent,
          canActivate: [AuthGuard],
          children:[
              {
                  path: 'user', component: UserComponent,
              },
              {
                  path: 'overview', component:OverViewComponent
              }
          ]
      }
  ];
  </code></pre>
  
  <p>But now, I want to have overview to have their own child, so I defined html as:</p>
  
  <pre><code>&lt;div&gt;This is overvew&lt;/div&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>And then I defined overview routes like below:</p>
  
  <pre><code>    const overviewRoutes:Routes = [
      {
          path: "",
          component: OverViewComponent,
          children:[
              {
                  path:'reg',
                  component: RegularComponent
              },
              {
                  path:'rt',
                  component: RealTimeComponent
              }
          ]
      }
  ];
  </code></pre>
  
  <p>then I got error:</p>
  
  <pre><code> Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/overview/reg'
  </code></pre>
  
  <p>Now, I am lost, overView is already defined in the second route, how should I update first route here?</p>
  
  <p>I changed first one to </p>
  
  <p>path: 'overview', redirectTo:'overview/reg', totally failed.</p>
  
  <p>I could define all the routes in the first route definition, but that is not elegant enough at all.  I want the overview route definition in its own module here.</p>
  
  <p>Hope you understand what I mean here.</p>
  
  <p>Thanks</p>