<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently I have to import my components for declarations in bootstrap and in my router config.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
I should only have to import my declarations in my router config, The module should take care of adding the declarations.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://plnkr.co" rel="nofollow">https://plnkr.co</a> or similar (you can use this template as a starting point: <a href="http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5" rel="nofollow">http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5</a>).</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Extra work that was not needed before.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [all]</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Before <code class="notranslate">NgModules</code> I only had to import my routes in the routes config:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {DashboardComponent} from &quot;./dashboard/dashboard.component&quot;;
import {SettingsComponent} from &quot;./settings/settings.component&quot;;
import {AboutComponent} from &quot;./about/about.component&quot;;
import {LoginComponent,LoginGuard,UserResolver} from &quot;./login/index&quot;;
import {NotFoundComponent} from &quot;./not-found/not-found.component&quot;;
import {TasksComponent} from './tasks/tasks.component';

export const APP_ROUTES: Routes = [
  {path: '', component: DashboardComponent}, 
  {path: 'settings', component: SettingsComponent}, 
  {path: 'about', component: AboutComponent}
];"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">DashboardComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./dashboard/dashboard.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">SettingsComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./settings/settings.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">AboutComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./about/about.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">LoginComponent</span><span class="pl-kos">,</span><span class="pl-smi">LoginGuard</span><span class="pl-kos">,</span><span class="pl-smi">UserResolver</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./login/index"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">NotFoundComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./not-found/not-found.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">TasksComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./tasks/tasks.component'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-smi">APP_ROUTES</span>: <span class="pl-smi">Routes</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">DashboardComponent</span><span class="pl-kos">}</span><span class="pl-kos">,</span> 
  <span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'settings'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">SettingsComponent</span><span class="pl-kos">}</span><span class="pl-kos">,</span> 
  <span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'about'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-smi">AboutComponent</span><span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">after upgrading to NgModule I need to import this whole list once again in my bootstrap-file / MainModule:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {DashboardComponent} from &quot;./dashboard/dashboard.component&quot;;
import {SettingsComponent} from &quot;./settings/settings.component&quot;;
import {AboutComponent} from &quot;./about/about.component&quot;;
import {LoginComponent,LoginGuard,UserResolver} from &quot;./login/index&quot;;
import {NotFoundComponent} from &quot;./not-found/not-found.component&quot;;
import {TasksComponent} from './tasks/tasks.component';

@NgModule({
  imports: [BrowserModule, FormsModule, RouterModule.forRoot(APP_ROUTES)],
  entryComponents: [AppComponent],
  declarations: [DashboardComponent, SettingsComponent,  AboutComponent, LoginComponent, NotFoundComponent, TasksComponent ],
  bootstrap: [AppComponent]
})
class MainModule {
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">DashboardComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./dashboard/dashboard.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">SettingsComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./settings/settings.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">AboutComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./about/about.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">LoginComponent</span><span class="pl-kos">,</span><span class="pl-smi">LoginGuard</span><span class="pl-kos">,</span><span class="pl-smi">UserResolver</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./login/index"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">NotFoundComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"./not-found/not-found.component"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">TasksComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./tasks/tasks.component'</span><span class="pl-kos">;</span>

@<span class="pl-smi">NgModule</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">imports</span>: <span class="pl-kos">[</span><span class="pl-smi">BrowserModule</span><span class="pl-kos">,</span> <span class="pl-smi">FormsModule</span><span class="pl-kos">,</span> <span class="pl-smi">RouterModule</span><span class="pl-kos">.</span><span class="pl-en">forRoot</span><span class="pl-kos">(</span><span class="pl-smi">APP_ROUTES</span><span class="pl-kos">)</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">entryComponents</span>: <span class="pl-kos">[</span><span class="pl-smi">AppComponent</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">declarations</span>: <span class="pl-kos">[</span><span class="pl-smi">DashboardComponent</span><span class="pl-kos">,</span> <span class="pl-smi">SettingsComponent</span><span class="pl-kos">,</span>  <span class="pl-smi">AboutComponent</span><span class="pl-kos">,</span> <span class="pl-smi">LoginComponent</span><span class="pl-kos">,</span> <span class="pl-smi">NotFoundComponent</span><span class="pl-kos">,</span> <span class="pl-smi">TasksComponent</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">bootstrap</span>: <span class="pl-kos">[</span><span class="pl-smi">AppComponent</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MainModule</span> <span class="pl-kos">{</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">This is quite a lot of copy paste...</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">I would assume, that when I pass the routing-config to the RouterModule, it should be possible for Angular to add the Routing-Components (like <code class="notranslate">DashboardComponent</code>) automatically to the module.</p>
<p dir="auto">Whereas for other Directives the NgModule-approach means less work, for Routing-Components it currently means more work than before. So it would be cool to reduce the need of copy-pasting here.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/angular/angular/commit/8efbcc996a0f9582387ee3c78dc1c54d5bed9c51/hovercard" href="https://github.com/angular/angular/commit/8efbcc996a0f9582387ee3c78dc1c54d5bed9c51"><tt>8efbcc9</tt></a></li>
<li><strong>Browser:</strong> [all ]</li>
<li><strong>Language:</strong> [all]</li>
</ul>