Angular入门教程出现NG0203错误：inject()需在注入上下文调用

问题描述 #

按照Angular官方Hello World教程操作，执行ng serve后在Chrome打开http://localhost:4200，浏览器显示空白页，DevTools控制台抛出以下错误：

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.
at injectInjectorOnly (core.mjs:1096:11)
at ɵɵinject (core.mjs:1106:40)
at Object.factory (core.mjs:19227:42)

检查下载的示例代码，未发现任何inject调用。

环境信息 #

Windows 11系统，已安装的版本信息：

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显示依赖已更新，npm run build可正常完成，npx run start因无对应脚本报错，ng serve启动正常但访问空白。

错误截图：

已尝试操作 #

• 卸载重装npm、Node.js、Angular CLI至最新版本
• 切换到Angular 17.2兼容版本
• 他人按相同步骤可正常运行，排除教程代码问题，推测为本地环境异常

额外异常 #

开启Chrome DevTools的“Pause on caught exceptions”后，断点指向的文件内容与本地文件不一致：

解决方案 #

针对这类本地环境导致的NG0203错误，可按以下步骤排查：

1. 清理缓存与依赖 #

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 执行npm cache clean --force清理npm缓存
• 重新执行npm install安装依赖

2. 补全Angular核心包 #

从ng version输出看，Angular核心包未显示版本，可能存在安装不完整问题，执行以下命令补全依赖：

npm install @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser-dynamic

3. 修复源映射异常 #

断点显示文件与本地不一致是源映射问题，可尝试：

• 确认angular.json中开发环境的sourceMap配置为true：

  "architect": {
    "build": {
      "configurations": {
        "development": {
          "sourceMap": true
        }
      }
    }
  }
  

• 打开Chrome DevTools → 网络标签 → 勾选“禁用缓存”，刷新页面

4. 统一CLI版本 #

全局与本地CLI版本冲突可能导致异常，执行以下命令统一版本：

# 卸载全局CLI
npm uninstall -g @angular/cli
# 安装与项目匹配的本地CLI
npm install @angular/cli@19.1.5 --save-dev
# 使用本地CLI启动项目
npx ng serve

5. 检查环境权限与拦截 #

• 确认Node.js和npm路径已添加到系统PATH环境变量
• 以管理员身份运行终端，避免权限不足导致依赖安装异常
• 临时关闭杀毒软件或防火墙，确保node_modules和dist文件夹可正常读写

6. 重新生成项目 #

若以上步骤无效，用官方脚手架重新创建项目排除文件损坏：

ng new hello-world --no-standalone
cd hello-world
ng serve

内容的提问来源于stack exchange，提问作者Scott Langham