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? — Developer, May 14 '21 at 19:18
https://stackoverflow.com/questions/58749172/angular-circular-dependency-warning — Developer, 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 4 · 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

Pieterjan · Answer 2 · 2023-05-30T14:03:08.800

I just had this issue with a simple component and directive inside a library. The directive injects the component, and the component uses this directive in the template. So a typescript import cycle is introduced.

resizable.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'lib-resizable',
  template: `<div [resizableGlyph]="['top', 'start']"></div>`
})
export class ResizableComponent {}

resizable-glyph.directive.ts

import { Directive, Input } from '@angular/core';
import { ResizableComponent } from '../resizable/resizable.component';
export type Position = 'top' | 'end' | 'bottom' | 'start';

@Directive({ selector: '[resizableGlyph]' })
export class ResizableGlyphDirective {
  constructor(private resizable: ResizableComponent) { }

  @Input('resizableGlyph') positions: Position[] = [];
}

Here is the error, but sadly the docs only show the scenario
Here is information on how to solve it

To solve this, I had to use import type

resizable.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'lib-resizable',
  template: `<div [resizableGlyph]="['top', 'start']"></div>`,
  providers: [
    { provide: 'RESIZABLE', useExisting: ResizableComponent }
  ]
})
export class ResizableComponent {}

resizable-glyph.directive.ts

import { Directive, Inject, Input } from '@angular/core';
// Below solves the import cycle
import type { ResizableComponent } from '../resizable/resizable.component';
export type Position = 'top' | 'end' | 'bottom' | 'start';

@Directive({ selector: '[resizableGlyph]' })
export class ResizableGlyphDirective {
  constructor(@Inject('RESIZABLE') private resizable: ResizableComponent) { }
  @Input('resizableGlyph') positions: Position[] = [];
}

Commit reference

Now you'll have problems running your jest unit tests. To solve this you need to do the following

score 0 · Answer 3 · answered Dec 28 '22 at 11:52

Update 2022

We faced this problem because we had a import statement that looked like

import { myUtilFunc } from "../../"

This was added by vscode automatically when auto importing & was working fine during ng serve as well as ng serve --prod.

We had to change the import statement to

import { myUtilFunc } from "../../utils"

and the build resolved after it

score -1 · Answer 4 · answered May 25 '22 at 07:31

-1

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

153
1
8

enableIvy=true indeed removes the error, however, does not allow to publish the library to npm. – Alexander Golovinov Sep 27 '22 at 18:11

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

4 Answers4

Update 2022

Linked