Angular DI broken out of the box

[snowmandev]

Current Behavior

• Runtime error in browser encountered when using injected service in component: TypeError: Cannot read properties of undefined.
• Linting error encountered if injected below the property of which it is assigned (i.e., constructor is positioned at the bottom of the component).

Note: Adding "useDefineForClassFields": false into the tsconfig.json file resolves both these issues

Expected Behavior

• No runtime errors in browser when using components with DI.
• No linter errors in IDE when injected below assignment property.

GitHub Repo

https://github.com/snowmandev/broken-angular-di

Steps to Reproduce

1. Clone the above mentioned repo (the repo is created by running npx create-nx-workspace@latest broken-angular-di --preset=angular-standalone and using all default values).
2. Run npm install
3. Navigate to: src > app > app.component.ts
4. You should see linter error on line 16: Property 'appService' is used before its initialization.
5. View the browser runtime error
   • Comment out line 9 and line 16 to remove code for linter error example (to avoid breaking the build).
   • Run nx serve
   • Press: Ctrl + Shift + J in browser to open console to see the runtime errors.

Nx Report

Node : 22.11.0
OS : linux-x64
Native Target : x86_64-linux
npm : 10.9.0

nx (global) : 20.0.7
nx : 20.0.7
@nx/js : 20.0.7
@nx/jest : 20.0.7
@nx/eslint : 20.0.7
@nx/workspace : 20.0.7
@nx/angular : 20.0.7
@nx/devkit : 20.0.7
@nx/eslint-plugin : 20.0.7
@nx/web : 20.0.7
@nx/webpack : 20.0.7
typescript : 5.5.4

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Adding "useDefineForClassFields": false into the tsconfig.json file resolves these issues.