需要创建一个或多个导入周期来编译该组件，当前编译器配置不支持这一点

Question

我有一个旧的角度库，当我迁移到angular 12并尝试构建我的库时，我收到以下错误：

  projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts:7:1
      7 @Component({
        ~~~~~~~~~~~~
      8   selector: 'app-alerts',
        ~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     39 
        
     40 }
        ~
    The component 'AlertsComponent' is used in the template but importing it would create a cycle: projects/namespace/lin-folder//src/lib/components/header/header.component.ts -> projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts -> projects/namespace/lin-folder//src/lib/website.module.ts -> projects/namespace/lin-folder/src/lib/components/header/header.component.ts

有人遇到过同样的错误吗？

Answer 1

问题是我interface在我的Librarymain中声明了一个module，并且我的一个组件导入了该interface. 所以我必须将其移动interface到一个新文件并在模块文件和组件文件中共享它。

以下是组件中共享的模块代码

export interface WebsiteEnvironment {. // as this in the module file and imported in one of the component, it created the problem
  restUrl?: string;
  alertDelayInSeconds?: number;
  loginUrl: string;
  allowTokenToAllDomain?: string;
}

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  exports: [
    ...
  ],
  entryComponents: [
    ...
  ]
})
export class WebsiteModule {
  public static forRoot(websiteEnvironment: WebsiteEnvironment): ModuleWithProviders<WebsiteModule> {
    return {
      ngModule: WebsiteModule,
      providers: [
        ...
      ]
    };
  }

  constructor(@Optional() @SkipSelf() parentModule: WebsiteModule) {
    if (parentModule) {
      throw new Error(
        ...
    }
  }
}

直接把接口去掉了。创建一个新文件并添加该接口。在模块和组件中共享接口导入将消除循环依赖