I have the following Angular 12 workspace:

projects/
  lib_a/
  lib_b/
  host/

Where basically:

• lib_a contains some UI kit
• lib_b handles authentication stuff and depends on lib_a to reuse the UI kit
• host is an app that imports both libs

What I'm wondering is... is this possible? Can I import lib_a into its sibling lib_b?

Both libs can be built just fine but as soon as I try to import one into the other (say, lib_a into lib_b) I get the following error:

Building entry point 'lib_b'
------------------------------------------------------------------------------
✖ Compiling with Angular in legacy View Engine compilation mode.
ERROR: Angular structure loaded both synchronously and asynchronously

I googled the error and found this previous question: How to fix: Error: Angular structure loaded both synchronously and asynchronously, so I reviewed all imports and they seem to be OK, then disabled Ivy for both libs and checked that there aren't any missing dependencies. Still got nothing.

None of these libraries is published so a local solution would be preferred (i.e. I can't deploy the package to NPM/GitHub yet).

CodePudding user response：

I also failed setting up an angular workspace with a library that references another library (= monorepo). You should create an NX workspace instead.

• Here are the commands I did
• Here is a demo project with all instructions
• nx.dev

This DOES in fact allow you to reference libraries from applications, and libraries from other libraries, all in the same workspace.