Angular 4-检测到循环依赖。 两个组件导入了另一个组件的.ts文件

Question

Currently working on resolving a circular dependency that's been introduced in our code base. Our team uses the webpack circular dependency plugin, so we're notified in the browser console if one of these circular dependencies is found.

Error in the browser console reads as follows: Circular dependency detected: src\\app\\domain\\admin\\employer\\employer-form\\employer-form.component.ts -> src\\app\\domain\\admin\\people\\people-form\\people-form.component.ts -> > src\\app\\domain\\admin\\people\\people-form\\demographics-form\\demographics-form.component.ts -> src\\app\\domain\\admin\\employer\\employer-form\\employer-form.component.ts

Relevant bits of employer-form.component.ts

import { PanelTypesEnum } from '../../core/enums/panel-types.enum';
import { PeopleFormComponent } from '../../people/people-form/people-form.component';
import { PeopleService } from '../../people/people.service';

@Component({
    selector: 'hl2-employer-form',
    templateUrl: 'employer-form.component.html',
    styleUrls: ['employer-form.component.scss']
})

export class EmployerFormComponent extends BaseComponentService implements OnInit, OnDestroy {
    @Input() model: PanelModel;
    ...

     constructor(route: ActivatedRoute,
            ...) {
    super(route);
}

    ngOnInit() {
        this.initializeForm();
        this.componentInitialize();
        this.initializeSubscriptions();
    }


    confirmCancel(): void {
        if (!this.employerForm.pristine || this.employerForm.dirty) {
            this.adminConfirmationService.confirm(this.confirmation);
        } else {
            this.navigateAwayFromForm();
        }
    }

    componentInitialize(): void {
        this.confirmation = {message: '', accept: () => { this.navigateAwayFromForm(); }};
        this.panelService.onPanelHide.takeUntil(this.ngUnsubscribe)
            .subscribe(panel => {
                if (panel && panel.id === this.model.id) {
                    this.confirmCancel();
                } else if (this.panelService.verifyEditFormPanelRequiresConfirmation(this.model, panel)) {
                    this.confirmation.databag = <PanelModel>panel;
                    this.confirmCancel();
                } else {
                    this.navigateAwayFromForm();
                }
            });
    }

    navigateAwayFromForm(): void {
        let panel: PanelModel;
        this.employerForm.reset('');
        this.panelService.removePanel(this.model);

        // in the case this form was activated by people form, only allow the user to navigate back to the people form on cancel, or pill click.
        if (this.model.options.activatorPanel === <Component>PeopleFormComponent) {
            if (this.peopleService.person.getValue().peopleId) {
                // need to check current person in peopleService to determine if there is
                // a peopleId assigned. If so, we need to redirect the user back to edit people form.
                this.adminPanelService.newPeoplePanel(PanelTypesEnum.EditPeople, <Component>PeopleFormComponent,
                    <Component>EmployerFormComponent, false);
            } else {
                this.adminPanelService.newPeoplePanel(PanelTypesEnum.CreatePeople, <Component>PeopleFormComponent,
                    <Component>EmployerFormComponent, false);
            }
            return;
        }

        // otherwise, set next panel onFormClosed
        if (this.confirmation.databag instanceof PanelModel) {
            panel = this.confirmation.databag;
        } else {
            panel = this.adminPanelService.getEmployerGridPanel();
        }
        this.panelService.onFormClosed.next(panel);
    }
 ....

Relevant bits of people-form.component.ts

import { EmployerFormComponent } from '../../employer/employer-form/employer-form.component';
import { DisplayDateTimePipe } from 'shared/date.pipe';
import { PeopleConstants } from '../../core/constants/people-constants';

@Component({
    selector: 'hl2-people-form',
    templateUrl: './people-form.component.html',
    styleUrls: ['./people-form.component.scss']
})

export class PeopleFormComponent extends BaseComponentService implements OnInit, OnDestroy {
    @Input() model: PanelModel;
    @ViewChild(DemographicsFormComponent) demographicsFormComponent: DemographicsFormComponent;

   ...
   ...

    showEmployerGrid: BehaviorSubject<boolean> = new BehaviorSubject(false);

    constructor(route: ActivatedRoute,
                ...) {
        super(route);
    }

    ngOnInit(): void {
        this.componentInitialize();
        this.initializeForm();
        this.initializeSubscriptions();
    }

public initializeForm(): void {
    if (this.model.options.activatorPanel === <Component>EmployerFormComponent) {
        this.showEmployerGrid.next(true);
    }

    this.peopleForm = PeopleFormUtils.newPeopleForm(this.formBuilder);

    this.nameTypeOptions = AdminConstants.nameTypeOptions();
    this.prefixOptions = AdminConstants.prefixOptions();
    this.suffixOptions = AdminConstants.suffixOptions();
    this.professionalSuffixOptions = AdminConstants.professionalSuffixOptions();

    this.genderOptions = PeopleFormUtils.translateGenderOptions(this.translateService);
    this.maritalOptions = AdminConstants.maritalStatusOptions();
    this.languageOptions = AdminConstants.languageOptions();
    this.races = AdminConstants.metaDataList.races;
    this.ethnicities = AdminConstants.metaDataList.ethnicities;
}
    navigateAwayFromForm(): void {
        let panel: PanelModel;
        this.demographicsFormComponent.demographicsForm.reset('');
        this.panelService.removePanel(this.model);

        // in the case this form was activated by user form, only allow the user to navigate back to the user form on cancel, or pill click.
        if (this.model.options.activatorPanel === <Component>UserFormComponent) {
            // override default requireConfirmation setting, since this is reopening the people grid modal within the user form.
            this.adminPanelService.newUserPanel(PanelTypesEnum.CreateUser, <Component>UserFormComponent, <Component>PeopleFormComponent, false);
            return;
        }

        // otherwise, set next panel onFormClosed
        if (this.confirmation.databag instanceof PanelModel) {
            panel = this.confirmation.databag;
        } else {
            panel = this.adminPanelService.getPeopleGridPanel();
        }
        this.panelService.onFormClosed.next(panel);
    }

    componentInitialize(): void {
        this.confirmation = {
            message: '', accept: () => {
                this.navigateAwayFromForm();
            }
        };
        this.panelService.onPanelHide.takeUntil(this.ngUnsubscribe)
            .subscribe((panel) => {
                //probably x click from pill
                if (panel && panel.id === this.model.id) {
                    this.confirmCancel();
                } else if (this.panelService.verifyEditFormPanelRequiresConfirmation(this.model, panel)) {
                    this.confirmation.databag = <PanelModel>panel;
                    if (this.areFormsDirty()) {
                        this.confirmCancel();
                    } else {
                        this.navigateAwayFromForm();
                    }
                }
            });
    }

Because of the two components importing the other component's file in the import statements, we're seeing the circular dependency warning.

What suggestions would anyone have for how to resolve this? Thanks in advance!

Answer 1

I don't have a specific answer for you, but obviously the problem is the first line of the initializeForm() method in people-form.component:

if (this.model.options.activatorPanel === <Component>EmployerFormComponent)

I recommend that you structure your code so that the PeopleFormComponent does not need to explicitly know about the EmployerFormComponent.

One way to do this would be to determine somewhere else whether you need to display the employer grid, and then perhaps pass a boolean into the route, or inject a shared service that has that information.

I'm also not sure that your current check works, since you are explicitly casting EmployerFormComponent to a Component. Perhaps you just need to check whether this.model.options.activatorPanel is non-empty?

If you really do need to check explicitly, create an interface and then have the EmployerFormComponent implement that interface. Then check whether the "model.options.activatorPanel" implements that interface.