One or more import cycles would need to be created to compile this component, which is not supported by the current compiler configuration

Question

I have an old angular library and when I migrate to angular 12 and try to build my library I am getting the below error:

  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

Did anyone face the same kind of error?

Did you reimport component in any other places rather than app.module? — GaurangDhorda, May 14 '21 at 19:18
https://stackoverflow.com/questions/58749172/angular-circular-dependency-warning — GaurangDhorda, May 14 '21 at 19:24
This answer solved this problem for me: https://stackoverflow.com/a/61127062/349169 — Chris, Jun 02 '22 at 11:45

score 3 · Answer 1 · answered May 14 '21 at 19:38

The problem was I have an interface declared in my Library main module and one of my components imported that interface. So I have to move the interface to a new file and share it both in the modules file and component file.

Below is the Module code which is shared in the component

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(
        ...
    }
  }
}

Simply removed the interface. create a new file and add that interface. share the interface import in both module and component will remove the circular dependency

This was a solution to my problem aswell. I had a variable that weas being exported in module and caused the problem. Moved that variable to another file and worker properly — Cafn, Aug 05 '21 at 11:15
I had the same issue, because I imported one module to common module and two times in other modules. I removed two other import, and all work well. — V.Tur, Jan 24 '22 at 07:46

score 0 · Answer 2 · answered May 25 '22 at 07:31

0

I got the same error when I was building a library.

To fix it I changed in tsconfig.lib.prod.json the option of enableIvy to be true

answered May 25 '22 at 07:31

Nadav Avisror

115
6

One or more import cycles would need to be created to compile this component, which is not supported by the current compiler configuration

2 Answers2