title: Angular 4, convert from component to module
body: <p>I have a component <strong>DfqComponent</strong> that I want to turn into a module, but it should keep its routing behavoir. These are the routes I want to keep, defined in the module <strong>ProductionLineRoutingModule</strong>, that has its own outlet:  </p>
  
  <pre><code>const routes: Routes = [
    { path: 'line', component: ProductionLineListComponent },
    { path: 'line/:name', component: ProductionLineDetailsComponent,
    children: [
      { path: 'dfq', component: DfqComponent },
      // other modules planed
      { path: '', pathMatch: 'full', redirectTo: 'dfq' }
    ]
  }];  
  </code></pre>
  
  <p>To turn <strong>DfqComponent</strong> to <strong>DfqModule</strong> and call it as before, I used the following routing in <strong>DfqRoutingModule</strong>:  </p>
  
  <pre><code>const routes: Routes = [
    { path: 'line/:name/dfq', component: DfqComponent }
  ];
  </code></pre>
  
  <p>This showed me the desired html (actually only simply the word DFQ), but in my opinion there are two drawbacks:<br>
  1. The outlet now is the primary outlet of the <strong>AppComponent</strong>.<br>
  2. The route definition is coupled with the <strong>ProductionLineModule</strong> ('<strong><em>line/:name/dfq</em></strong>' instead of '<strong><em>dfq</em></strong>').</p>
  
  <p>So how can I achieve this?</p>
  
  <p>The project actually looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/s53sJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s53sJ.png" alt="Project overview"></a></p>