Angular: Как использовать и делиться компонентами ввода, такими как формы для отложенной загрузки - PullRequest
Новая
       20

Angular: Как использовать и делиться компонентами ввода, такими как формы для отложенной загрузки

0 голосов
/ 04 ноября 2019

Я перевел приложение в режим отложенной загрузки, но столкнулся с некоторыми проблемами.

У меня есть, например, 2 компонента формы, которые являются общими для всего приложения.

Однако они аварийно завершают работу, когда компоненты не зарегистрированы в элементах entryComponents модуля приложения.

Например:

shared.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ShadeComponent} from '../components/loading/shade.component';
import {MaterialModule} from './material.module';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {PrivacyIconComponent} from '../components/privacy-icon/privacy-icon.component';
import {EventActionsComponent} from '../components/event-actions/event.actions.component';
import {ChartsTimelineComponent} from '../components/charts/timeline/charts.timeline.component';
import {ChartsPieComponent} from '../components/charts/pie/charts.pie.component';
import {ChartsXYComponent} from '../components/charts/xy/charts.xy.component';
import {EventCardChartComponent} from '../components/cards/event/chart/event.card.chart.component';
import {EventFormComponent} from '../components/event-form/event.form.component';
import {ActivityFormComponent} from '../components/activity-form/activity.form.component';
import {DeleteConfirmationComponent} from '../components/delete-confirmation/delete-confirmation.component';


@NgModule({
  imports: [
    CommonModule,
    MaterialModule
  ],

  declarations: [
    ShadeComponent,
    PrivacyIconComponent,
    EventActionsComponent,
    ChartsTimelineComponent,
    ChartsPieComponent,
    ChartsXYComponent,
    EventCardChartComponent,
    EventFormComponent,
    ActivityFormComponent,
    DeleteConfirmationComponent,
  ],
  providers: [
  ],
  entryComponents: [
    EventFormComponent,
    ActivityFormComponent,
    DeleteConfirmationComponent,
  ],
  exports: [
    ShadeComponent,
    PrivacyIconComponent,
    EventActionsComponent,
    ChartsTimelineComponent,
    ChartsPieComponent,
    ChartsXYComponent,
    EventCardChartComponent,
    EventFormComponent,
    ActivityFormComponent,
    DeleteConfirmationComponent,
    ReactiveFormsModule,
    FormsModule]

})
export class SharedModule {
}

Зависимый модуль: 

import {NgModule} from '@angular/core';
import {MaterialModule} from './material.module';
import {SharedModule} from './shared.module';
import {CommonModule} from '@angular/common';
import {EventRoutingModule} from '../event-routing.module';
import {EventCardComponent} from '../components/cards/event/event.card.component';
import {EventCardMapComponent} from '../components/cards/event/map/event.card.map.component';
import {EventCardStatsComponent} from '../components/cards/event/stats/event.card.stats.component';
import {EventCardLapsComponent} from '../components/cards/event/laps/event.card.laps.component';
import {EventCardToolsComponent} from '../components/cards/event/tools/event.card.tools.component';
import {ActivityIconComponent} from '../components/activity-icon/activity-icon.component';
import {ActivitiesCheckboxesComponent} from '../components/acitvities-checkboxes/activities-checkboxes.component';
import {ActivityActionsComponent} from '../components/activity-actions/activity.actions.component';
import {MapActionsComponent} from '../components/map-actions/map.actions.component';
import {EventCardChartComponent} from '../components/cards/event/chart/event.card.chart.component';
import {EventCardChartActionsComponent} from '../components/cards/event/chart/actions/event.card.chart.actions.component';
import {EventCardDevicesComponent} from '../components/cards/event/devices/event.card.devices.component';
import {ActivityHeaderComponent} from '../components/activity-header/activity-header.component';
import {AgmCoreModule} from '@agm/core';
import {MatPaginatorIntl} from '@angular/material/paginator';
import {MatPaginatorIntlFireStore} from '../components/event-table/event.table.component';


@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    EventRoutingModule,
    AgmCoreModule
  ],
  exports: [],
  declarations: [
    EventCardComponent,
    EventCardMapComponent,
    EventCardStatsComponent,
    EventCardLapsComponent,
    EventCardToolsComponent,
    EventCardChartActionsComponent,
    EventCardDevicesComponent,
    ActivityIconComponent,
    ActivitiesCheckboxesComponent,
    ActivityActionsComponent,
    ActivityHeaderComponent,
    MapActionsComponent,
  ],
  entryComponents: [],
  providers: [
    {provide: MatPaginatorIntl, useClass: MatPaginatorIntlFireStore},
  ],
})


export class EventModule {
}

Я получаю ошибку: 

Template error: Can't bind to 'formGroup' since it isn't a known property of 'form'

Однако, как вы можете видеть, общий модуль импортирует модуль ReactForms и Angular Form.

Что я делаю не так?

1 Ответ

2 голосов
/ 04 ноября 2019

Эта ошибка означает, что вы пытаетесь использовать свойство из FormsModule или ReactiveFormsModule в модуле, который не импортировал ни один из них.

Я вижу, что вы включили их в свой SharedModule exports массив, но вы никогда не добавляли их в массив imports. Насколько я знаю, вы не можете экспортировать вещи, которые ранее не были импортированы или заявлены. Я думаю, что добавление FormsModule и / или ReactiveFormsModule в ваш SharedModule.imports решит проблему.

...