title: Angular router seems to work but doesn't load component
body: <p>I have a path structure like this: <code>/events/100/drawing/200</code> and events and drawings are separate modules with their own routing tables, like:</p>
  
  <pre><code>// Event ID routes
  const routes: Routes = [
  {
      path: ':eventID', 
      data: { breadcrumb: 'Drawings &amp; Results' },
      component: EventComponent,
  
      children: [
          {
              path: 'drawing', 
              loadChildren: () =&gt; import('@app/modules/event-drawing/event-drawing.module').then(mod =&gt; mod.EventDrawingModule)
          }
      ]
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>const routes: Routes = [
  {
      path: ':drawingID', 
      data: { breadcrumb: 'Drawing' },
      component: EventDrawingComponent
  },
  ];
  </code></pre>
  
  <p>There is a breadcrump that shows me the current path and the routing seems to work. But in any case the <code>EventComponent</code> is loaded, but not the <code>EventDrawingComponent</code> as expected.</p>
  
  <p>I also tried this to remove the <code>EventComponent</code> from:</p>
  
  <pre><code>// Event ID routes
  const routes: Routes = [
  {
      path: ':eventID', 
      data: { breadcrumb: 'Drawings &amp; Results' },
  
      children: [
          {
              path: 'drawing', 
              loadChildren: () =&gt; import('@app/modules/event-drawing/event-drawing.module').then(mod =&gt; mod.EventDrawingModule)
          }
      ]
  }
  </code></pre>
  
  <p>Now the <code>EventDrawingComponent</code> is loaded but of course <code>/events/100</code> wont work anymore. Please can you tell me what is wrong with my code? </p>