angularivy

Problems with enabling Ivy in Angular 10

We have a problem with our angular app.

We recently updated to angular 10 and enabled Ivy and aot.

Now we are running into several problems that we are not able to solve.

Here is a quick overview of our setup

The app is enterprise sized and contains several libraries which depend on each other.

These libraries are then used in other angular applications/workspaces which themselves contain libraries that are used further.

Here is a simple illustrations of our setup:

Core repository:

CoreApp
--projects
---coreLibA
---coreLibB
--src
---components <-- uses code from coreLibs

User Repository

UserApp
--projects
---userLibA <-- uses core libs
---userLibB <-- uses core libs
--src
---components <-- uses core libs as well as code from userLibs

The core-libraries are build into a folder and are consumed by the user-application from that folder through NPM.

This works well with angular 10 without ivy.

First Problem

So, at first we enabled Ivy everywhere (libraries and applications). We were able to build the coreLibs without problems and install them into the userApp as well. ng serve on the userApp works as well. But when we tried to build the userLibs we encounter following error:

ERROR: Cannot resolve type entity i4.CommonModule to symbol
An unhandled exception occurred: Cannot resolve type entity i4.CommonModule to symbol

We were able to solve some of these errors by removing imported modules in ngModules that were not necessary. But sadly, we couldn't solve all the issues.

We still don't understand why this error occurs only with ivy and what it actually means.

Second Problem

We then tried to build the libraries without ivy but still run the application with ivy.

This way we were able to build the userLibs without problems. But when we tried to ng serve following error occurs:

ERROR in the target entry-point "coreLibB" has missing dependecies:
 - @angular/localize/init
 - @angular/cdk/platform
 - rxjs/operators
 - coreLibA
 ... and some more

We tried to work around that by adding hard dependencies in the libraries package.json and whitelist them in the ng-package.json. That worked, but npm install ran out of memory. So this is not a solution either.

Conclusion

It seems that Ivy is much stricter that View Engine. But we need Ivy to use the new localization feature of angular 10.

So we would really appreciate help with this problem. We know that we probably didn't provide enough information, but we just don't know what information is needed. So just let us know and we deliver.

Thanks for your help

Solution

  • Here is the solution: Angular GitHub Issue

    Basically it has to do with where the packages are consumed from. If the packages lay outside the project, "preserveSymlinks": true is necessary.