Import multiple Angular components via module

Question

My Angular project is growing so I want to keep my project clean.

I have one Angular component which depends on a nested Angular component.

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

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.

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

//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{ }

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

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.

Edit: Source code https://github.com/Linksonder/Webdictaat/

Error msg:

---

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.
 ("
    </div>
    <div class="col-md-3">
        <wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat>
    </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. ("
    </div>
    <div class="col-md-3">
        [ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dicta"): DictatenComponent@21:8 ; Zone: <root> ; 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.
 ("
    </div>
    <div class="col-md-3">
        <wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat>
    </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. ("
    </div>
    <div class="col-md-3">
        [ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</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)

Answer 1

You need to add your components to Dictaat.module.ts's exports in order for them to be imported in your app.module.ts:

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

@NgModule({
    imports: [BrowserModule, HttpModule],
    declarations: [DictaatComponent, DictaatEntryComponent],
    exports: [DictaatComponent, DictaatEntryComponent]
})

export class DictaatModule{ }