Использование нескольких пользовательских модулей в угловом 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 { }

До сих пор так хорошо. Теперь я хочу, чтобы ссылаться на этот MySharedModule в главных app.module.ts и я делаю что-то вроде этого:

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):

Невозможно привязать к вкладкам, так как это не известное свойство «tab-bar». 1. Если «tab-bar» является угловым компонентом и имеет вход «вкладки», проверьте, что он является частью этого модуля. 2. Если «tab-bar» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@ NgModule.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 E. Если для примера компонента А используется компонент В в шаблоне, и компонент B используется компонент C в его шаблоне и т. Д., Тогда зависимости между этими компонентами составляют A-> B, B-> C, C-> D, D-> E, E-> F. В этом случае правильный порядок их перечисления в декларациях будет : [E, D, C, B, A].