title: Import multiple Angular components via module
body: <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>