Importowanie wielu komponentów kątowych za pomocą modułu

Question

Projekt My Angular rośnie, więc chcę zachować swój projekt w czystości.

Mam jeden składnik kątowy, który zależy od zagnieżdżonego komponentu kątowego.

Teraz potrzebuję dwóch instrukcji importu, aby użyć tych komponentów, które nie mogą działać bez siebie.

Jako rozwiązanie chciałem stworzyć mały moduł Angular, który zawiera te dwa komponenty i zaimportować moduł do mojej głównej aplikacji.

Po wykonaniu tej czynności pojawia się błąd informujący, że jeden z komponentów wewnątrz małego modułu nie został rozpoznany.

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

Moje pytanie: Czy jest to dobra praktyka, aby grupowania wielu elementów w jednym module i jest to już obsługiwane w kątowe?

ps. Współpracuję z Angularem 2.0.0, a nie z RC. Moja konfiguracja jest porównywalna z konfiguracją samouczka wycieczki bohaterów.

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

błąd 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

Trzeba dodać elementy do eksportu Dictaat.module.ts „s, aby mogły być importowane w 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{ } 

Answer 2

składników, dyrektyw i rury, które powinny stać się dostępne poprzez importowanie tego modułu, muszą być wymienione w exports. declarations jest, aby te elementy dostępne w module:

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

Answer 3

Dla mnie Mam wiele niestandardowych komponentów, więc utworzyłem jeden custom-view.module.ts i eksportuję wszystkie komponenty.

Inne moduły chce używać widoków niestandardowych musi importować CustomViewModule

niestandardowym view.module.ts

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ RatingComponent ], 
    exports: [ RatingComponent ] 
}) 
export class CustomViewModule { } 

iw innych modułów, które chcą używać niestandardowych widzenia (RatingComponent w tym przypadku)

@NgModule({ 
    imports: [ 
    CustomViewModule 
    ] 
}) 

export class OtherModule { } 

Używam kątowego 4+, a eksportowanie DictaatComponent, a następnie importowanie DictaatModule do modułu aplikacji nie działa na mnie. Nadal muszę zaimportować wszystkie DictaatModule do każdego modułu, który chce użyć DictaatComponent.

Answer 4

Dla programistów jonowych za pomocą leniwych stron ładujących. Ten błąd "nie jest znaną właściwością" może wystąpić nawet po zaimportowaniu go na poziomie modułu aplikacji.

Powodem tego jest używanie funkcji leniwego ładowania jonowego.

Aby to naprawić, wystarczy go zaimportować pod numerem Page Module level.

Dobre zasoby do zrozumienia leniwego ładowania.

http://blog.ionic.io/ionic-and-lazy-loading-pt-1/

http://blog.ionic.io/ionic-and-lazy-loading-pt-2/