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 /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
> [email protected] 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\appponent.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
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): If I then browse to that folder the contents of the file seems to be different:
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
> [email protected] 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\appponent.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
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): If I then browse to that folder the contents of the file seems to be different:
Share Improve this question edited Feb 7 at 13:33 Scott Langham asked Feb 5 at 12:30 Scott LanghamScott Langham 60.4k42 gold badges137 silver badges211 bronze badges 11 | Show 6 more comments1 Answer
Reset to default 3I found this which has the same cause:
https://github/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.
npm installafter downloading? also trynpx run startwhich run the cli of your project – Naren Murali Commented Feb 5 at 12:34