angular

Angular tutorial gives error NG0203: inject() must be called from an injection context

I've followed the Angular hello world tutorial. After running ng serve and opening Chrome to http://localhost:4200 I see a blank page in the browser. Chrome DevTools console shows the error:

ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.dev/errors/NG0203
    at injectInjectorOnly (core.mjs:1096:11)
    at ɵɵinject (core.mjs:1106:40)
    at Object.factory (core.mjs:19227:42)

I've searched the sample app code I've downloaded and do not find any call to inject. What could be wrong?

I'm using Windows 11 and have the versions installed. Here's some commands I tried.

❯ node -v
v22.13.1

❯ ng version

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


Angular CLI: 19.1.5
Node: 22.13.1
Package Manager: npm 10.9.2
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1901.5 (cli-only)
@angular-devkit/core         19.1.5 (cli-only)
@angular-devkit/schematics   19.1.5 (cli-only)
@schematics/angular          19.1.5 (cli-only)


❯ npm install

up to date, audited 1126 packages in 3s

158 packages are looking for funding
  run `npm fund` for details

10 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

❯ npm run build

> angular.dev@0.0.0 build
> ng build

Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-76SWU2S6.js      | main          |  96.55 kB |                28.60 kB
polyfills-FFHMD2TL.js | polyfills     |  34.52 kB |                11.28 kB
styles-GSBFIRKP.css   | styles        | 298 bytes |               298 bytes

                      | Initial total | 131.37 kB |                40.18 kB

Application bundle generation complete. [2.824 seconds]

Output location: D:\SampleWebApp\first-app_01-hello-world\dist\first-app

 D:  SampleWebApp  first-app_01-hello-world                                                            4.566s  12:40:03
❯ npx run start
Watching D:\SampleWebApp\first-app_01-hello-world and all sub-directories not excluded by your .gitignore. Will not monitor dotfiles.
Found & ignored ./node_modules ; is listed in .gitignore
Found & ignored ./dist\first-app\browser\styles-GSBFIRKP.css ; has ignored extension
Found & ignored ./src\app\app.component.css ; has ignored extension
Found & ignored ./src\styles.css ; has ignored extension

Starting: start
node:internal/modules/cjs/loader:1247
  throw err;
  ^

Error: Cannot find module 'D:\SampleWebApp\first-app_01-hello-world\start'
    at Function._resolveFilename (node:internal/modules/cjs/loader:1244:15)
    at Function._load (node:internal/modules/cjs/loader:1070:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
    at node:internal/main/run_main_module:36:49 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v22.13.1

❯ ng serve
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  90.20 kB |
main.js             | main          |   1.33 kB |
styles.css          | styles        | 457 bytes |

                    | Initial total |  91.98 kB

Application bundle generation complete. [1.365 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

enter image description here

I've also tried uninstalling everything: npm, node, ng, npm, fpm. And then reinstalled latest versions and followed latest version of the tutorial. I get the same injection error. I've tried version 17.2 of angular with node installed at compatible version. Same error. Somebody else tried this for me on their machine and it just works for them following the same steps. So, I'm guessing there's something about my machine that's screwed up, but I have no idea what. I don't want to have to reset and reinstall my entire PC for this.

Interestingly if I set "Pause on caught exceptions" in the Sources tab of Chrome DevTools, it breaks here (observe the file path and line number): enter image description here If I then browse to that folder the contents of the file seems to be different: enter image description here

Solution

  • I found this which has the same cause:

    https://github.com/angular/angular/issues/54147

    I have drive D: with all my source code which is actually set-up using subst to map it from folder C:\dev. I've been working with a drive mapped like that for many years and not had an issue until angular.

    If I ng serve from under the original C:\dev it works, but if I ng serve from under the D: drive, it fails with this error.