Linksonder Linksonder - 2 months ago 202
AngularJS Question

Import multiple angular2 components via module

My Angular2 project is growing so i want to keep my project clean.

I have 1 Angular component wich depends on a nested Angular component.

Now i need 2 import statements to use these components wich cannot work without each other.

As a solution i wanted to create a small Angular module wich contains these 2 components and import the module into my main app.module.

After doing this i get an error wich 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 1 module and is this already supported in Angular2?

ps.
Im working with Angular 2.0.0, not any RC's.
My setup is comparible 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

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