angular - 检测到循环依赖中的警告 - 自从更新到 Angular 10

Question

我正在从每个主要版本 7->12 进行更新。从版本 10 开始，我收到编译错误“检测到循环依赖中的警告”。奇怪的是；它不会出现在第一次编译（ng serve）中，但只会在我保存对 CtrlLines 组件的更改并导致第二次编译时出现。此外，我在报告文件的导入语句中找不到冲突。

我在下面列出了这些进口。谁能给我推动正确的方向？

信息 ：

检测到循环依赖项中的警告：src/app/system/dialogs/template-dialog/template-dialog.component.ts -> src/app/controls/ctrl-lines/ctrl-lines.component.ts -> src/app/控件/ctrl-line/ctrl-line.component.ts -> src/app/controls/standard/tw-phone-ctrl/tw-phone-ctrl.component.ts -> src/app/data/data.service。 ts -> src/app/service/form.service.ts -> src/app/system/dialogs/template-dialog/template-dialog.component.ts

代码摘录：

src/app/system/dialogs/template-dialog/template-dialog.component.ts -> 

import { OnInit, Inject, Component } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
import { TranslateService } from '@ngx-translate/core';
import { TemplateLine } from '../../../data/interfaces';
import { FormGroup } from '@angular/forms';

src/app/controls/ctrl-lines/ctrl-lines.component.ts -> 

import { Component, Input, EventEmitter, Output, OnChanges } from '@angular/core';
import { TemplateLine } from '../../data/interfaces';
import { FormGroup } from '@angular/forms';

src/app/controls/ctrl-line/ctrl-line.component.ts -> 

import { Component, OnInit, Input, Directive, ViewContainerRef, ViewChild, Type, ComponentFactoryResolver, EventEmitter, Output, OnChanges } from '@angular/core';
import { TemplateLine, TemplateControl, TwValidator, BlHelperInfo, SelectItem } from '../../data/interfaces';
import { TwCtrlComponent } from '../tw-ctrl.component';
import { TwTextCtrlComponent } from '../standard/tw-text-ctrl/tw-text-ctrl.component';
import { TwEmailCtrlComponent } from '../standard/tw-email-ctrl/tw-email-ctrl.component';
import { TwPhoneCtrlComponent } from '../standard/tw-phone-ctrl/tw-phone-ctrl.component';
import { TwAddressCtrlComponent } from '../standard/tw-address-ctrl/tw-address-ctrl.component';
import { TwSpanCtrlComponent } from '../standard/tw-span-ctrl/tw-span-ctrl.component';
import { TwComboCtrlComponent } from '../standard/tw-combo-ctrl/tw-combo-ctrl.component';
import { TwEmployeeCtrlComponent } from '../standard/tw-employee-ctrl/tw-employee-ctrl.component';
import { TwDatetimeCtrlComponent } from '../standard/tw-datetime-ctrl/tw-datetime-ctrl.component';
import { TwNumberCtrlComponent } from '../standard/tw-number-ctrl/tw-number-ctrl.component';
import { TwCheckCtrlComponent } from '../standard/tw-check-ctrl/tw-check-ctrl.component';
import { TwKeywordCtrlComponent } from '../standard/tw-keyword-ctrl/tw-keyword-ctrl.component';
import { TwLinkListComponent } from '../standard/tw-linklist/tw-linklist.component';
import { TwLinkDetailComponent } from '../standard/tw-linkdetail/tw-linkdetail.component';
import { TwNotesCtrlComponent } from '../standard/tw-notes-ctrl/tw-notes-ctrl.component';
import { TwAdminListComponent } from '../standard/tw-adminlist/tw-adminlist.component';
import { TwAdminDetailComponent } from '../standard/tw-admindetail/tw-admindetail.component';
import { TwDividerComponent } from '../standard/tw-divider/tw-divider.component';
import { FormService } from '../../service/form.service';
import { FormGroup, FormControl, Validators, ValidatorFn } from '@angular/forms';
import { DataService } from '../../data/data.service';
import { CommonProcService } from '../../service/common-proc.service';
import * as _moment from 'moment';
import { TwSubDataListComponent } from '../standard/tw-subdatalist/tw-subdatalist.component';
import { TwSubDataDetailComponent } from '../standard/tw-subdatadetail/tw-subdatadetail.component';
import { TwEntityCtrlComponent } from '../standard/tw-entity-ctrl/tw-entity-ctrl.component';
import { TwZipCodeConnectComponent } from '../specials/tw-zipcode-connect/tw-zipcode-connect.component';
import { TwCommentComponent } from '../standard/tw-comment/tw-comment.component';
import { TwRightsListComponent } from '../standard/tw-rights-list/tw-rights-list.component';
import { TwRightsUsersComponent } from '../standard/tw-rights-users/tw-rights-users.component';
import { TwRightsHelpComponent } from '../standard/tw-rights-help/tw-rights-help.component';
import { TwCampaignImportComponent } from '../specials/tw-campaign-import/tw-campaign-import.component';
import { TwCampaignMaintComponent } from '../specials/tw-campaign-maint/tw-campaign-maint.component';
import { TwHelpInfoComponent } from '../standard/tw-help-info/tw-help-info.component';
import { TwCampaignCheckComponent } from '../specials/tw-campaign-check/tw-campaign-check.component';
import { TwCampaignSyncComponent } from '../specials/tw-campaign-sync/tw-campaign-sync.component';
import { TwCampaignContactComponent } from '../specials/tw-campaign-contact/tw-campaign-contact.component';
import { TwCampaignSubscribeComponent } from '../specials/tw-campaign-subscribe/tw-campaign-subscribe.component';
import { TwRadioCtrlComponent } from '../standard/tw-radio-ctrl/tw-radio-ctrl.component';
import { TwTimeAssignComponent } from '../specials/tw-time-assign/tw-time-assign.component';
import { TwSummaryComponent } from '../standard/tw-summary/tw-summary.component';
import { TwButtonCtrlComponent } from '../standard/tw-button-ctrl/tw-button-ctrl.component';
import { TwListComponent } from '../standard/tw-list/tw-list.component';

src/app/controls/standard/tw-phone-ctrl/tw-phone-ctrl.component.ts -> 

import { Component, OnInit } from '@angular/core';
import { TwCtrlComponent } from '../../tw-ctrl.component';
import { DataService } from '../../../data/data.service';
import { CommonProcService } from '../../../service/common-proc.service';

src/app/data/data.service.ts -> 

import { Injectable, OnDestroy } from '@angular/core';
import { EntityType, EntitySection, SearchHitWord, SearchHits, EntityInfo, FchEntities, 
         CountryListItem, ListType, User, LinkItems, LinkItem, ChgLinkItem, LinkType, 
         DataDefault, SearchEntity, ListItem, FileData, Template, UserInfo, TypeIndex, SettingGroup, 
         GetSetting, TimLinkComponent, UserRoleItem, AuthResult, TimLinkComponents, TimLinkDefault, 
         TimLinkFilterActive, LinkBuffer, ActionItem, SettingItem, FileTransferInfo, DataSetItem, 
         SubData, EraseCheckInfo, TagNode, AppView, LinkChanges, NewLinkInfo2, GroupRemoves, MailAddress, 
         Address, PhoneNumber, SecurityGroup, SecurityMember, SubDataChange, SummaryInfo, EntityAdmin, 
         TemplateLine, StickyPointer} from '../data/interfaces'
import { HttpService } from '../service/http.service';
import { FormService } from '../service/form.service';
import { Observable, BehaviorSubject, Subject, timer, of, Subscription } from 'rxjs'; 
import { map, tap } from 'rxjs/operators'
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { MsgService } from '../service/msg.service';
import { CommonProcService } from '../service/common-proc.service';
import { Router } from '@angular/router';
import { MatDialogRef } from '@angular/material/dialog';
import { FileSaveProgressDialogComponent } from '../system/dialogs/file-save-progress-dialog/file-save-progress-dialog.component';

src/app/service/form.service.ts -> 

import { Injectable, OnDestroy, Type } from '@angular/core';
import { Subscription ,Observable , BehaviorSubject, of ,Subject } from "rxjs";
import { debounceTime, tap } from 'rxjs/operators';
import { MediaChange, MediaObserver } from "@angular/flex-layout";
import { FormStatus, Template, TemplateLine, TimLinkComponent, TimLinkDefault, TimLinkFilterActive } from '../data/interfaces' 
import { FormGroup } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
import { YesNoDialogComponent } from '../system/dialogs/yes-no-dialog/yes-no-dialog.component';
import { DialogComponent } from '../system/dialogs/dialog.component';
import { HttpService } from './http.service';
import { OkDialogComponent } from '../system/dialogs/ok-dialog/ok-dialog.component';
import { ImageDialogComponent } from '../system/dialogs/image-dialog/image-dialog.component';
import { TemplateDialogComponent } from '../system/dialogs/template-dialog/template-dialog.component';
import { FileSaveProgressDialogComponent } from '../system/dialogs/file-save-progress-dialog/file-save-progress-dialog.component';
import { EraseCheckDialogComponent } from '../system/dialogs/erasecheck-dialog/erasecheck-dialog.component';
import { CreateInvoiceDialogComponent } from '../system/dialogs/create-invoice-dialog/create-invoice-dialog.component';
import { BiDialogComponent } from '../system/dialogs/bi-dialog/bi-dialog.component';
import { GroupSecureDialogComponent } from '../system/dialogs/group-secure-dialog/group-secure-dialog.component';

src/app/system/dialogs/template-dialog/template-dialog.component.ts
-see above

标签： angular

Answer 1

通过升级到 Angular 11 版解决了这个问题。仍然是个谜，但不再是问题！

谢谢。