Import multiple Angular components via module
<p>My Angular project is growing so I want to keep my project clean.</p>

<p>I have one Angular component which depends on a nested Angular component. </p>

<p>Now I need two import statements to use these components which cannot work without each other. </p>

<p>As a solution I wanted to create a small Angular module which contains these two components and import the module into my main app.module. </p>

<p>After doing this I get an error which states that one of the components inside the small module is not recognized. </p>

<pre><code>//app.module.ts
@NgModule({
    imports: [BrowserModule, HttpModule, DictaatModule],
    declarations: [AppComponent, DictatenComponent, FilePreviewComponent],
    bootstrap: [AppComponent]
})


//Dictaat.module.ts
import { DictaatComponent } from './dictaat.component';
import { DictaatEntryComponent } from './dictaat-entry.component';

@NgModule({
    imports: [BrowserModule, HttpModule],
    declarations: [DictaatComponent, DictaatEntryComponent],
})
export class DictaatModule{ }
</code></pre>

<p>My question: Is it a good practice to group multiple components into one module and is this already supported in Angular?</p>

<p>ps.
Im working with Angular 2.0.0, not any RC's. 
My setup is comparable to the setup of the tour of heroes tutorial. </p>

<p>Edit: Source code
<a href="https://github.com/Linksonder/Webdictaat/" rel="noreferrer">https://github.com/Linksonder/Webdictaat/</a></p>

<p>Error msg: </p>

<hr>

<pre><code>Unhandled Promise rejection: Template parse errors:
Can't bind to 'dictaatName' since it isn't a known property of 'wd-dictaat'.
1. If 'wd-dictaat' is an Angular component and it has 'dictaatName' input, then verify that it is part of this module.
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
        &lt;wd-dictaat [ERROR -&gt;][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat"&gt;Loading dictaat...&lt;/wd-dictaat&gt;
    &lt;/d"): DictatenComponent@21:20
'wd-dictaat' is not a known element:
1. If 'wd-dictaat' is an Angular component, then verify that it is part of this module.
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
        [ERROR -&gt;]&lt;wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat"&gt;Loading dictaat...&lt;/wd-dicta"): DictatenComponent@21:8 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'dictaatName' since it isn't a known property of 'wd-dictaat'.
1. If 'wd-dictaat' is an Angular component and it has 'dictaatName' input, then verify that it is part of this module.
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
        &lt;wd-dictaat [ERROR -&gt;][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat"&gt;Loading dictaat...&lt;/wd-dictaat&gt;
    &lt;/d"): DictatenComponent@21:20
'wd-dictaat' is not a known element:
1. If 'wd-dictaat' is an Angular component, then verify that it is part of this module.
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
        [ERROR -&gt;]&lt;wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat"&gt;Loading dictaat...&lt;/wd-dicta"): DictatenComponent@21:8
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
    at Set.forEach (native)
    at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)
</code></pre>