title: Angular 2 (Final): resetConfig to add routes to lazy loaded routes
body: <p>I'm trying to understand how to dynamically add routes to those from a lazy loaded module.
  I have the core app, with routes:</p>
  
  <pre><code>export const routes = [{
      path: "",
      component: HomeComponent
  }, {
      path: "moduleA",
      loadChildren: "app/moduleA/A.module"
  }];
  </code></pre>
  
  <p>In A.module I import routes from the "local" moduleA.routes.config.ts:</p>
  
  <pre><code>const routes = [{
      path: "",
      component: ModuleAHomeComponent,
      children: [
          { path: "", component: ModuleAListComponent },
          { path: ":id", component: ModuleADetailComponent }
      ]
  }];
  export const routing = RouterModule.forChild(routes);
  </code></pre>
  
  <p>So far so good. Now, in ModuleADetailComponent I have a list of "additional modules", which I'll call plugins, for my webapp, which are developed separately and I want to be able to show in ModuleADetailComponent page.
  Therefore, the template for this component is something like this:</p>
  
  <pre><code>&lt;div *ngFor="let plugin of plugins"&gt;
      &lt;div class="header"&gt;{{ plugin.name }}&lt;/div&gt;
      &lt;router-outlet name="*plugin.name*"&gt;*LOAD MODULE HERE*&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Of course, plugins is a configuration loaded upon navigation to ModuleADetailComponent, so I don't know ahead of time which modules are configured and how many there are.
  Lastly, each of these plugins can be an NgModule (developed separately in a workbench environment).</p>
  
  <p>What I need is: how do I modify the router configuration, dynamically, to add children to the route defined in moduleA.routes.config.ts?
  For example, if I have 2 plugins, I want to dynamically use router.resetConfig to have what I would have if moduleA.routes.config.ts was like this:</p>
  
  <pre><code>const routes = [{
      path: "",
      component: ModuleAHomeComponent,
      children: [
          { path: "", component: ModuleAListComponent },
          { 
              path: ":id",
              component: ModuleADetailComponent,
              children: [
                  {
                      path: "plugin1",
                      loadChildren: "app/plugins/plugin1.module",
                      outlet: "plugin1"
                  },
                  {
                      path: "plugin2",
                      loadChildren: "app/plugins/plugin2.module",
                      outlet: "plugin2"
                  }                
              ]
          }
      ]
  }];
  export const routing = RouterModule.forChild(routes);
  </code></pre>
  
  <p>I hope I can achieve it, otherwise plugins will have to be developed without routing...but they can become big sub-modules which would benefit from navigation.</p>
  
  <p><strong>EDIT 27/09/2016</strong>: I've assembled this plunkr: <a href="http://plnkr.co/edit/6aV5n5K5wdqdiYo49lZv" rel="noreferrer">http://plnkr.co/edit/6aV5n5K5wdqdiYo49lZv</a>. 
  What I am currently able to do is load components dynamically and add them to the application (see tab "Dynamic Modules").
  What I've also done is to use multiple named router-outlets, despite not finding any official documentation (see tab "Dynamic Routed"). Despite the tab name, routes are known ahead of time.</p>
  
  <p>What I want to do is: dynamically load a configuration (the dynamicRoutes array in the DynamicRoutesComponent) and only after create one router-outlet per dynamic route and use resetConfig (or what it takes) to have this configuration:</p>
  
  <pre><code>{
    path: "dynamic-routed",
    component: DynamicRoutesComponent,
    children: [
      { path: "", component: EmptyComponent },
      { path: "component1", component: Component1, outlet: "component1" },
      { path: "component2", component: Component2, outlet: "component2" }
    ]
  }
  </code></pre>
  
  <p>with one child per dynamic route.</p>
  
  <p>Thanks in advance!</p>