I am currently working on a dynamic form module for Ionic 4.7.0 and Angular 5.0.3. The module involves creating a DynamicFormComponent, which internally utilizes the DynamicFormService. This service is designed to operate within the module and does not need to be accessed externally. However, the service relies on the Ionic ModalController to manage modal popups, leading to the following error:
Can't resolve all parameters for DynamicFormComponent(?, [object Object])If I eliminate the ModalController dependency from the service, the error disappears. Nevertheless, the ModalController is essential for generating popups in various components of the module.
How can I resolve this issue?
Below is the implementation of my dynamic-form.module.ts, which is imported into my AppModule:
import { NgModule, ErrorHandler } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule, IonicErrorHandler } from 'ionic-angular';
import { ReactiveFormsModule } from '@angular/forms';
import { StringFieldComponent } from './fields/stringfield.component';
import { SelectFieldComponent } from './fields/selectfield.component';
import { NumberFieldComponent } from './fields/numberfield.component';
import { DynamicFormService } from './dynamic-form.service';
import { DynamicFormComponent } from './dynamic-form.component';
import { DynamicFieldDirective } from './dynamic-field.directive';
@NgModule({
declarations: [
StringFieldComponent,
SelectFieldComponent,
NumberFieldComponent,
DynamicFieldDirective,
DynamicFormComponent,
],
providers: [
DynamicFormService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
],
imports: [
CommonModule,
IonicModule,
ReactiveFormsModule,
],
exports: [
DynamicFormComponent,
],
entryComponents: [
StringFieldComponent,
SelectFieldComponent,
NumberFieldComponent,
]
})
export class DynamicFormModule {
}
The snippet below shows an abridged version of the dynamic-form.component.ts file containing relevant sections:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormConfig } from './models/form-config.interface';
import { DynamicFormService } from './dynamic-form.service';
// Omitted code for brevity purposes
Here is a portion of the DynamicFormService that outlines its structure:
import { Injectable } from '@angular/core';
import { Validators } from '@angular/forms';
import 'rxjs/add/operator/map';
import { ModalController } from 'ionic-angular';
import { FormConfig } from './models/form-config.interface';
import { FieldConfig } from './models/field-config.interface';
@Injectable()
export class DynamicFormService {
private modals = {};
constructor(
public modalCtrl: ModalController
) {
console.log("Started dynamic form service");
}
// Additional code omitted
}
To ensure completeness, here is my app.module.ts setup:
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { EnviMo } from './app.component';
// More import statements removed for conciseness