Angular 2 (RC5)의 복수 주문형 모듈 활용

Question

계속 성장하고있는 ng2 ​​앱을 RC5로 업그레이드하고 모든 구성 요소/파이프를 하나의 뚱뚱한 주 모듈로 묶었습니다. 부풀어 오르는 것을 막기 위해 내 앱을 별도의 모듈로 만들려고했다.

내-shared.module.ts 지금까지

import { NgModule }  from "@angular/core"; 
 
import { BrowserModule } from "@angular/platform-browser"; 
 
import { FormsModule } from "@angular/forms"; 
 
import { provideForms, disableDeprecatedForms } from"@angular/forms"; 
 

 
import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component"; 
 
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component"; 
 
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component"; 
 
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component"; 
 

 

 
@NgModule({ 
 
    imports: [ 
 
     BrowserModule, 
 
     FormsModule 
 
    ], 
 
    declarations: [ 
 
     TabBarWidgetComponent, 
 
     MyDatepickerComponent, 
 
     CalendarSelectorComponent, 
 
     AccordionTabComponent 
 

 
    ], 
 
    providers: [ 
 
     provideForms(), 
 
     disableDeprecatedForms() 
 
    ] 
 

 
}) 
 
export class MySharedModule { }

너무 좋아

: 여기

내가 어떤 보편적 인 구성 요소를 포함하는 생성 한 서브 모듈입니다. 지금은 주요 app.module.ts이 MySharedModule을 참조 할 나는이 같은 일을 오전 :

import { NgModule }  from "@angular/core"; 
 
import { BrowserModule } from "@angular/platform-browser"; 
 
import { FormsModule } from "@angular/forms"; 
 
import { HttpModule } from "@angular/http"; 
 

 
import { MySharedModule } from "./shared/my-shared.module"; 
 

 
import { Some1Component } from "./folder/some1.component"; 
 
import { Some2Component } from "./folder/some2.component"; 
 
import { Some3Component } from "./folder/some3.component"; 
 
import { Some4Component } from "./folder/some4.component"; 
 
import { Some5Component } from "./folder/some5.component"; 
 

 
import "rxjs/add/operator/map"; 
 
import "rxjs/add/operator/toPromise"; 
 

 
@NgModule({ 
 
    imports: [ 
 
    BrowserModule, 
 
    FormsModule, 
 
    HttpModule, 
 
    MySharedModule 
 
    ], 
 
    declarations: [ 
 
    AppComponent, 
 
    Some1Component, 
 
    Some2Component, 
 
    Some3Component, 
 
    Some4Component, 
 
    Some5Component, 
 

 
    ], 
 
    providers: [], 
 
    bootstrap: [AppComponent], 
 
    entryComponents: [] 
 

 
}) 
 
export class AppModule { }

문제는 내가 제안 다음과 같은 오류를 (무엇입니까입니다 하위 모듈 구성 요소가 app.module.ts에 정의 된대로 앱에서 인식되지 않습니다.

'탭 표시 줄'의 알려진 속성이 아니기 때문에 '탭'에 바인딩 할 수 없습니다. 1. 'tab-bar'가 Angular 구성 요소이고 'tabs'입력이 있으면이 모듈의 일부인지 확인하십시오. 2. 'tab-bar'가 웹 구성 요소 인 경우이 구성 요소의 '@ NgModule.schema'에 "CUSTOM_ELEMENTS_SCHEMA"를 추가하여이 메시지를 표시하지 않습니다.

내가 뭘 잘못하고 있는지 알 수 있습니까?

Answer 1

공유 모듈에 exports 섹션을 추가하십시오.

import { NgModule }  from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { FormsModule } from "@angular/forms"; 
import { provideForms, disableDeprecatedForms } from"@angular/forms"; 

import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component"; 
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component"; 
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component"; 
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component"; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule 
    ], 
    exports: [ 
     TabBarWidgetComponent, 
     MyDatepickerComponent, 
     CalendarSelectorComponent, 
     AccordionTabComponent 
    ], 
    declarations: [ 
     TabBarWidgetComponent, 
     MyDatepickerComponent, 
     CalendarSelectorComponent, 
     AccordionTabComponent 
    ], 
    providers: [ 
     provideForms(), 
     disableDeprecatedForms() 
    ] 

}) 
export class MySharedModule { } 

Answer 2

를 사용하여 프로그램의 다섯 개 가지 구성 요소가 있다면

고려해야 자세한 내용에 대한 구성 요소 확인이 link의 순서를 변경 시도, ABCD 구성 요소 A는 템플릿의 구성 요소 B를 사용하면 예를 들어 E. 및 구성 요소 B 이 템플릿에 사용 된 경우 등등 이러한 구성 요소 간의 종속성은 A -> B, B -> C, C -> D, D -> E, E -> F입니다. 이 경우에는 선언에 나열 할 순서가 [E, D, C, B, A]가됩니다.