title: Conditional routing configuration
body: <p>I would like to have a responsive application. It should have a different navigation on a small screen (series of screens to drill down to detail page) and on a big screen (left panel + details on a single page).</p>
  
  <p>In effect, I would like to load different components and have a different routing configuration depending on the screen/window size. And I would like to be able to switch between them dynamically, as the window is resized above/below a certain threshold.</p>
  
  <p>Since routing in Angular2 is defined on a component level, my idea was to create a root-level component, which would conditionally (ngIf) include either bigScreen.component.ts or smallScreen.component.ts. The routing itself would then be defined in bigScreen/smallScreen components. This does not seem to work though. </p>
  
  <p>I created a <a href="http://plnkr.co/edit/cjFR0jJ7N6zUdVPsiO1T?p=preview" rel="nofollow">plunk</a> to showcase. It's basically a copy of heroes navigation from the Angular tutorial. I created additional component <em>app/container.component.ts</em> which is bootstraped as a root component. It then embeds AppComponent (root component in the tutorial), which contains the routing configuration.</p>
  
  <p>This produces an error on the console:</p>
  
  <pre><code>Error: Component "AppContainer" has no route config.
  </code></pre>
  
  <p>Looks like I have to create navigation config in my root component if the nested components have one. Is there a way around it to achieve what I need? Or should the responsive routing be implemented differently?</p>