Share code between Angular and React with Yarn Workspaces does not work correctly

Question

I have created a monorepo with yarn workspaces and initialized 3 packages:

• react-app
• angular-app
• shared (package.json name @monorepo/shared)

angular-app and react-app include @monorepo/shared as a dependency. With the react-app everything works fine with importing code of the shared folder.

But I get an error when I import a function from "@monorepo/shared" into app.component.ts. It always returns the following message:

.

It seems like webpack does not load the node_modules from the outer node_modules folder correctly and does not include @monorepo/shared.

How can I configure the angular app to also include @monorepo/shared? If there is an compile error inside of the function in @monorepo/shared, it throws an error inside the angular-app, but the imported function always returns undefined.

folder structure: Folder structure

Angular CLI: 15.1.6
Node: 16.19.0
Package Manager: yarn 1.22.19
@angular-devkit/architect       0.1002.4
@angular-devkit/build-angular   15.1.6
@angular-devkit/core            10.2.4
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@schematics/angular             15.1.6
rxjs                            7.8.0
typescript                      4.9.5

I would be very thankful if anyone can help me with this issue. I have spent so much time with researching, but I still lack knowledge with angular and webpack config.

I have also tried adding a custom angular builder with the package ""@angular-builders/custom-webpack": "10.0.1"", but that always throws another error:

An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID See "/private/var/folders/_w/fdf/T/ng-wddfdNDWy/angular-errors.log" for further details.

But what do I have to configure in webpack to include the node_modules of the outer folder?