Angular Library build: Circular Dependency in template

user_16788348 0
Viewed 367

I am working on upgrading an library from Angular 12 to Angular 13 which is used in another angular application. I have a case where components will be used in cyclic manner.

Example

one.component.ts:

@Component({
  selector: 'lib-one',
  template: `<div><lib-two></lib-two></div>`,
  styles: [],
})
export class OneComponent {}

two.component.ts:

@Component({
  selector: 'lib-two',
  template: `<div><lib-one></lib-one></div>`,
  styles: [],
})
export class TwoComponent {}

When I try to build the library, I get an error like:

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

One way of handling this is to remove the below code from tsconfig.lib.prod.json

  "angularCompilerOptions": {
    "compilationMode": "partial"
  }

Is there any other way to handle this?

Please note components one and two can be in different modules and are being used circular way depending on some conditions.

Thanks in advance.

angular circular-reference circular-dependency
1 Answers

I had the same issue that you posted above. Here they suggested to move both of the components into a single component. I'm not the most experienced at angular so if someone could explain why this works to me, that would be great. But, it works. It allows you to compile using ivy in partial compilation mode without throwing the cyclic dependency error. It doesn't seem like the most elegant solution but maybe there's another way that I wasn't able to find.

Maybe have a look at this and see if it can help you, if you'd like to avoid moving the components into one shared component.ts file.

I hope this helped.

user_73320220
Related