需要创建一个或多个导入循环来编译此组件，当前编译器配置不支持该组件

问题描述

我有一个旧的 Angular 库，当我迁移到 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

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

解决方法

问题是我在 interface 主 Library 中声明了一个 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(
        ...
    }
  }
}

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