title: angular routing in lazy loaded module with child routes
body: <p>I have an app where every module is lazy loaded.  The structure is:</p>
  
  <ul>
  <li>app
  
  <ul>
  <li>grid-module</li>
  <li>dashboard-module
  
  <ul>
  <li>dashboard-grid module</li>
  <li>chart-module</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>I have spent all day trying to get links to dashboard-grid-module and chart-module to work but everything I try just makes it worse.  It is now to the point where clicking the link for chart-module loads dashboard-module inside dashboard-module and causes call stack limit.  I have created an app on stackblitz with the setup.  was hoping somebody could help me figure out what to do as the only thing I can think of is not to use routing at all.
  <a href="https://stackblitz.com/edit/angular-fwrgrj" rel="nofollow noreferrer">stack blitz app</a></p>
  
  <p><strong>Edit for 1st answer:</strong></p>
  
  <p>ah, that is the issue with setting everything up manually.  sorry.  my actual app has those defined.  the difference now between my stackblitz before and my app was that in my app I have to do router.navigate instead of routerlink.  so I have now updated it to have the definitions and use buttons with router.navigate.  I have also commented out everything I have tried with same results
  <a href="https://stackblitz.com/edit/angular-fwrgrj" rel="nofollow noreferrer">with changes</a></p>