Angular 13.3 -> 14 Error: NG0203: inject() must be called from an injection context (a constructor, a factory function or a field initializer)

[matteobruni]

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

Don't known / other

Is this a regression?

Yes

Description

I have a monorepo with 3 angular projects. They were working with Angular 13.3 and now with Angular 14 I'm getting this error in the browser console:

Error: NG0203: inject() must be called from an injection context (a constructor, a factory function or a field initializer)

I've tried reverting to Angular 13.3 again and everything is working as expected.

The codebase is here: https://github.com/matteobruni/tsparticles/tree/dev (The branch with Angular 14 is dev, not main)

The Component library is here: https://github.com/matteobruni/tsparticles/tree/dev/components/angular
The Angular demo app is here: https://github.com/matteobruni/tsparticles/tree/dev/demo/angular

There's also an Ionic app here: https://github.com/matteobruni/tsparticles/tree/dev/demo/ionic but I'm facing the same issue, so it can be ignored for now.

For running the project you can follow these steps:

• yarn in the root folder
• npx lerna bootstrap
• npx lerna run build
• cd demo/angular
• yarn start

And there you'll see the error in the browser console.

Please provide a link to a minimal reproduction of the bug

https://github.com/matteobruni/tsparticles/tree/dev/demo/angular

Please provide the exception or error you saw

Error: NG0203: inject() must be called from an injection context (a constructor, a factory function or a field initializer)

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

ng version

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

Angular CLI: 14.0.2
Node: 16.14.0
Package Manager: yarn 1.22.18 
OS: darwin arm64

Angular: 14.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.2
@angular-devkit/build-angular   14.0.2
@angular-devkit/core            14.0.2
@angular-devkit/schematics      13.3.8
@schematics/angular             14.0.2
rxjs                            7.5.5
typescript                      4.7.3

### Anything else?

_No response_

[JoostK]

This typically happens when there's multiple copies of @angular/core included.

The repo won't install for me (might be related to my arm64 M1 arch):

Package pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing `pixman-1.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pixman-1' found

but there is some interesting result if I search for @angular/core in lock files:

rg "@angular/core" **/yarn.lock
yarn.lock
271:"@angular/core@~14.0.2":
273:  resolved "https://registry.yarnpkg.com/@angular/core/-/core-14.0.2.tgz#298885081dfa6f4ce0fcb06233c62c7a32bb5caa"

demo/angular/yarn.lock
198:"@angular/core@~14.0.0":
200:  resolved "https://registry.yarnpkg.com/@angular/core/-/core-14.0.0.tgz#74a3df2988f81eb7ca00b5961a3145dadfa05e92"

demo/ionic/yarn.lock
253:"@angular/core@~14.0.0":
255:  resolved "https://registry.yarnpkg.com/@angular/core/-/core-14.0.0.tgz#74a3df2988f81eb7ca00b5961a3145dadfa05e92"

components/angular/yarn.lock
184:"@angular/core@~14.0.0":
186:  resolved "https://registry.yarnpkg.com/@angular/core/-/core-14.0.0.tgz#74a3df2988f81eb7ca00b5961a3145dadfa05e92"

Notably there's two versions, 14.0.0 and 14.0.2 which might get into each other's way (it may depend on how packages end up being hoisted.

[matteobruni]

I'm on a MBP14 with M1 Max, and it builds without issues.

I've tried installing Angular 14.0.0 and there it works (cleared the node_modules, so the lockfile was fixed). I restored Angular 14.0.2 (cleared again the node_modules, so the lockfile was fixed again) and the error showed up again.

The lockfiles in the projects are not used anymore since I've migrated to yarn workspaces, and I've removed them to be sure that they weren't interfering with the build process.

EDIT: I've done other tests, but Angular 14 seems the issue, I don't know why it worked with 14.0.0 earlier, but now with a deep clean, it's not working even with 14.0.0

[JoostK]

It being fixed with 14.0.0 does indicate that there is indeed some conflict in @angular/core versions.

I'm using Yarn 1.22.18, NodeJS 16.13.1, macOS 12.3 but there's no prebuilt arm64 binaries available for the canvas package and the node-gyp build fails for me (I do have Python 3.8.9 and Xcode build tools installed).

[matteobruni]

It seems an issue with yarn workspaces, returned to lerna without them and it works perfectly. Don't know why, but closing this.

[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.}