angular compilation fails within monorepos

[ducin]

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

compiler

Is this a regression?

Yes

Description

Probably it's related to compiler's internals incorrectly compiling packages resolved by npm link. In my case it's a yarn monorepo.
A very similar issue has been described (but not fixed) in #34478.

When loading a module (ts file) from a locally built monorepo package, it fails. But when exactly the same file is copied locally (no need to go through monorepo imports), all works fine (so there's no error in implementation). Finally, one has to override paths in tsconfig.json fixes the issue (importing from monorepo starts to work correctly).

How Angular behaves?

lView is null, it shouldn't be. Runtime fails entirely.

Attempts to fix

here @arobinson described some potential ays to have it fixed, although, some of them just don't work (e.g. preserveSymlinks didn't help at all), while others are either already default (like enableIvy) or make no sense anymore (ngcc). None of them worked for me:
#34478 (comment).

What worked for me was exactly this: ducin/xstate@b12cb05#diff-ebc3d1841e5a32fba603bb62117cc4781a0746724fa35a05d013a5d56e31cbe3

It took me ~1 day 😢 to find what is the solution and found it accidentally. I did find the issue, however what I still find disrupting is:

• there are no clear hints out there what might be wrong, e.g. I found no FAQ similar to this issue, no troubleshooting etc.
• available links/issues/tips (coming from community) seem completely outdated

In ideal world, hopefully this gets fixed. if not, a warning message (when npm link usage found? not sure) would help a lot. If not, any hint would be useful.

Reproduce steps

Very simple. Download & run example app all within one branch:

git clone https://github.com/ducin/xstate
git checkout 5312942a8d9c8d80f8371a1bf9a8d309bceed65e # commit WITHOUT THE FIX
# next commit WITH THE FIX: b12cb0505d0c13070025cf1df118e6ed89270b7b

## inside the repo: install and build the monorepo packages
yarn # install
yarn build # build packages

## run the example
cd examples/toggle-angular
yarn # install example's dependencies
npm start

switch between error-scenario and solution:

https://github.com/ducin/xstate/blob/5312942a8d9c8d80f8371a1bf9a8d309bceed65e/examples/toggle-angular/src/app/app.component.ts#L11-L12

switch between:

// import { injectActor } from './injectActor';
import { injectActor } from '@xstate/angular'; // this one fails, lView is null

and

import { injectActor } from './injectActor'; // local copy of EXACTLY same content works correctly
// import { injectActor } from '@xstate/angular';

Please provide a link to a minimal reproduction of the bug

https://github.com/ducin/xstate/tree/feature/xstate/angular

Please provide the exception or error you saw

lView is null, it shouldn't be.


core.mjs:11760 ERROR TypeError: Cannot read properties of null (reading '2')
    at storeLViewOnDestroy (core.mjs:2771:10)
    at NodeInjectorDestroyRef.onDestroy (core.mjs:14074:9)
    at xstate-angular.development.esm.js:20:16
    at runInInjectionContext (core.mjs:6345:16)
    at injectActor (xstate-angular.development.esm.js:8:10)
    at new _AppComponent (app.component.ts:35:17)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:34:3)
    at getNodeInjectable (core.mjs:4391:44)
    at createRootComponent (core.mjs:15644:35)
    at ComponentFactory.create (core.mjs:15508:25)
handleError @ core.mjs:11760
main.ts:6 TypeError: Cannot read properties of null (reading '2')
    at storeLViewOnDestroy (core.mjs:2771:10)
    at NodeInjectorDestroyRef.onDestroy (core.mjs:14074:9)
    at xstate-angular.development.esm.js:20:16
    at runInInjectionContext (core.mjs:6345:16)
    at injectActor (xstate-angular.development.esm.js:8:10)
    at new _AppComponent (app.component.ts:35:17)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:34:3)
    at getNodeInjectable (core.mjs:4391:44)
    at createRootComponent (core.mjs:15644:35)
    at ComponentFactory.create (core.mjs:15508:25)

### Please provide the environment you discovered this bug in (run `ng version`)

```true
angular CLI: 17.0.0
node: 20.9.0
package manager: yarn 1.22.21
OS: MacOS Sonoma 14.2

Anything else?

No response

[JoostK]

This is an issue with DestroyRef logic at runtime, not a compilation issue.

FYI ngcc no longer exists as of Angular 16.

[JoostK]

More generally, this is the classic problem where multiple copies of @angular/core are included in the bundle, each having their own runtime state.

[JoostK]

I've reopened #35586 as the umbrella issue for this situation, since it shares the same root cause.

[joewIST]

Also experiencing this issue. Is this to do with DestroyRef?

[angular-automatic-lock-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.}