New cyclical dependency errors in library with compilationMode: partial

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

We are upgrading our Angular library to v13 with partial compilation mode and we’re seeing new errors for cyclical dependencies coming from the component templates that are not thrown view engine compiler. I’m providing a link to a PR which shows the errors in the CI runs (both GitHub actions and Azure Pipelines).

Please provide a link to a minimal reproduction of the bug

https://github.com/IgniteUI/igniteui-angular/pull/10043

Please provide the exception or error you saw

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts:13:1
     13 @Component({
        ~~~~~~~~~~~~
     14     selector: 'igx-splitter-bar',
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ...
    249     }
        ~~~~~
    250 }
        ~
    The component 'IgxSplitBarComponent' is used in the template but importing it would create a cycle: D:/GitHub/igniteui-angular/projects/igniteui-angular/src/lib/splitter/splitter.component.ts -> D:/GitHub/igniteui-angular/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts -> D:/GitHub/igniteui-angular/projects/igniteui-angular/src/lib/splitter/splitter.component.ts

Please provide the environment you discovered this bug in

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.0-next.1
Node: 16.4.2 (Unsupported)
Package Manager: npm 6.14.11
OS: win32 x64

Angular: 13.0.0-next.2
... animations, common, compiler, compiler-cli, core, forms     
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------       
@angular-devkit/architect       0.1300.0-next.1
@angular-devkit/build-angular   13.0.0-next.1
@angular-devkit/core            13.0.0-next.1
@angular-devkit/schematics      13.0.0-next.1
@angular/cli                    13.0.0-next.1
@schematics/angular             13.0.0-next.1
ng-packagr                      12.2.0
rxjs                            6.6.7
typescript                      4.3.5

Anything else?

The exception that I’ve provided is just one of many that we’re getting in the library. We used to have cyclical dependency warnings that were all fixed. All of these errors are brand new after switching to partial ivy compilation mode.

[alxhub]

Ivy’s design is by its nature more sensitive to dependency cycles between components. A lot of Ivy’s benefits are realized by the “direct” references that it generates between components (instead of indirect references via .ngfactory files), but these direct references can also generate real cyclic references in ES module imports.

Ivy applications currently deal with this problem through a workaround - we use a different mechanism to set component dependencies, which avoids cycles but breaks tree-shaking in the process. For Ivy libraries, we made a conscious decision not to silently work around the problem and compromise on code size and efficiency, but to generate real errors in the uncommon case of cyclic components.

Fortunately, working around this error should always be possible, if a little annoying. Usually, the cycle can be broken by breaking the “reverse dependency” - if component A depends on component B, ensure that component B’s file doesn’t have any other runtime dependencies on component A’s file. Since a common pattern for such dependencies is to import interfaces or other types, import type can be very useful here to tell the compiler that these imports aren’t important at runtime.

If that’s not possible, components that crate cyclic references can always be moved into the same file, which completely eliminates the issue. Note that the Ivy compiler is fine if the project contains its own cycles, it’s just unwilling to introduce them on its own.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}