Использование нескольких пользовательских модулей в Angular 2 (RC5)

Я обновил постоянно растущее приложение 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):

Невозможно привязать к «вкладкам», так как это неизвестное свойство «панели вкладок». 1. Если «бар вкладок» является компонентом Angular и имеет ввод «вкладки», убедитесь, что он является частью этого модуля. 2. Если «бар вкладок» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@NgModule.schema» этого компонента, чтобы подавить это сообщение.

Может ли кто-нибудь увидеть, что я делаю неправильно?


person brando    schedule 17.08.2016    source источник


Ответы (2)


Попробуйте добавить раздел 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 { }
person John Siu    schedule 18.08.2016

попробуйте изменить порядок компонентов, проверьте эту ссылку для более подробной информации.

рассмотрите, есть ли у вас пять компонентов в вашей программе, A B C D E. Если, например, компонент A использует компонент B в своем шаблоне, а компонент B использует компонент C в своем шаблоне и т. д., то зависимости между этими компонентами A-> B , Б->С, С->Г, Г->Д, Е->Ж. В этом случае правильным порядком перечисления их в объявлениях будет следующий: [E, D, C, B, A].

person rashfmnb    schedule 17.08.2016
comment
Я столкнулся с этой ошибкой при сборке для производства, и вы можете быть правы, это может быть проблемой. Но на данный момент у меня так много зависимостей между компонентами, что у меня нет времени/терпения, чтобы разобраться с этим. Остается только дождаться исправления ошибки в RC6. - person brando; 17.08.2016
comment
Я тоже так думал в начале, но реализовал - person rashfmnb; 17.08.2016
comment
Относительно порядка заявленных компонентов: github.com/angular/angular/issues/10618 - person brando; 17.08.2016
comment
я упомянул это в своем ответе - person rashfmnb; 17.08.2016