Angular 错误百科NG 运行时错误与编译错误全指南基于 Angular 官方仓库【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular本篇指南基于 Angular 官方仓库中的错误百科adev/src/content/reference/errors/overview.md及其配套的 61 个独立错误条目文档系统梳理 Angular 应用在开发与运行中最常见的NG前缀错误码涵盖依赖注入、变更检测、SSR 水合Hydration、信号Signals、响应式表单、HttpClient 等核心模块的运行时错误以及模板编译阶段的编译器错误。读完本文你将能够根据错误码快速定位问题根因理解每条错误的触发条件、调试方法与修复路径并知晓这些错误在框架源码中的真实抛出位置。错误百科的总体结构在 Angular 仓库中错误百科位于 adev/src/content/reference/errors/其入口文件 overview.md 将全部错误分为两大类Runtime errors运行时错误应用在浏览器或 SSR 服务器端实际运行期间抛出的错误例如依赖注入找不到 Provider、变更检测不稳定、水合节点不匹配等。Compiler errors编译错误模板与组件在编译阶段被 Angular 编译器检查出的错误例如模板中使用了未声明的元素或属性、选择器冲突等。每个错误码都有对应的独立 Markdown 条目文档如 NG0100.md、NG0201.md采用统一的“错误含义 → 触发场景 → 调试步骤 → 修复方案含代码示例”结构编写方便开发者按码索骥。下表给出运行时错误码的一览CodeNameNG0100Expression Changed After CheckedNG0200Circular Dependency in DING0201No Provider FoundNG0203inject()must be called from an injection contextNG0204Invalid Injection TokenNG0205Injector has already been destroyedNG0207EnvironmentProviders in wrong contextNG0209Invalid multi providerNG0300Selector CollisionNG0301Export Not FoundNG0302Pipe Not FoundNG0318Invalid style property binding valueNG0401Missing platformNG0403Bootstrapped NgModule doesnt specify which component to initializeNG0500Hydration Node MismatchNG0501Hydration Missing SiblingsNG0502Hydration Missing NodeNG0503Hydration Unsupported Projection of DOM NodesNG0504Skip hydration flag is applied to an invalid nodeNG0505No hydration info in server responseNG0506NgZone remains unstableNG0507HTML content was altered after SSRNG0602Disallowed function call inside reactive contextNG0750defer dependencies failed to loadNG0751defer behavior when HMR is enabledNG0910Unsafe bindings on an iframe elementNG0912Component ID generation collisionNG0913Runtime Performance WarningsNG0919Circular Dependency DetectedNG0950Required input is accessed before a value is setNG0951Child query result is required but no value is availableNG0955Track expression resulted in duplicated keys for a given collectionNG0956Tracking expression caused re-creation of the DOM structureNG0991Resource completed before producing a valueNG01002Missing Control ValueNG01101Wrong Async Validator Return TypeNG01203Missing value accessorNG01902Orphan field in signal formsNG02200Missing Iterable DifferNG02800JSONP support in HttpClient configurationNG02802Headers not transferred by HttpTransferCacheNG02825Fetch response body exceeds the configured limitNG05000Hydration with unsupported Zone.js instance.NG05104Root element was not found.NG05106Insertion reference node not foundNG05703Suspicious URL origin change during SSR编译错误码一览CodeNameNG1001Argument Not LiteralNG2003Missing TokenNG2009Invalid Shadow DOM selectorNG3003Import Cycle DetectedNG6100NgModule.id Set to module.id anti-patternNG8001Invalid ElementNG8002Invalid AttributeNG8003Missing Reference TargetNG8023Multiple Components Match Same ElementNG8024Conflicting Host Directive Binding从编号规律可以观察到Angular 错误码并非随机分配NG02xx集中于依赖注入DI域NG05xx集中于水合Hydration域NG09xx集中于信号与变更检测相关的新特性NG8xxx则属于模板编译器错误NG1xxx/NG2xxx/NG3xxx覆盖编译器内部的参数、Token 与导入环检测。这种分区式编号便于开发者从错误码首段数字快速判断问题所属模块。依赖注入类错误NG02xxProvider、注入上下文与多 Provider依赖注入DI是 Angular 的核心机制也是最容易产生运行时错误的部分。以 NG0201: No Provider Found 为例当你尝试注入某个服务却没有为其声明对应的 Provider 时就会看到此错误。Provider 是一种映射关系它提供可以注入到应用类构造函数中的值。该错误的典型调试路径是从报错提示No provider for ${token}!的对象出发反向排查。该错误通常出现在依赖了某个不存在的 Provider 的服务中。修复方法有两类确保服务已注册到某个NgModule的providers列表中或在服务类上添加Injectable()文档中写作Service()装饰器Injectable() export class MyService {}从源码角度看这条错误的真正抛出位置在 packages/core/src/render3/errors_di.ts 的throwProviderNotFoundError函数中它组装出No provider for ${token} found的错误消息并抛出RuntimeErrorCode.PROVIDER_NOT_FOUND对应的RuntimeError错误码常量定义位于 packages/core/src/errors.ts。理解这一层有助于开发者在错误堆栈中快速识别“是谁在注入、注入器在哪一层”的关键信息。注入上下文约束NG0203NG0203:inject()must be called from an injection context 专门约束inject()函数的使用位置。合法的注入上下文包括类的构造阶段构造函数、构造函数参数、字段初始化器以及runInInjectionContext包裹的函数Injectable() export class Car { radio: Radio | undefined; // OK: 字段初始化器 spareTyre inject(Tyre); constructor() { // OK: 构造函数体 this.radio inject(Radio); } }也允许在 Provider 的工厂函数中调用providers: [ { provide: Car, useFactory: () { // OK: 类工厂 const engine inject(Engine); return new Car(engine); }, }, ];而在类实例创建完成之后例如生命周期钩子中调用inject()是非法的Component({ ... }) export class Car { ngOnInit() { // ERROR: 太晚了组件实例已经被创建 const engine inject(Engine); engine.start(); } }调试建议从错误堆栈反向定位非法的inject()调用位置把它移动到构造函数或字段初始化器中。特别地在测试环境中TestBed.runInInjectionContext(() { ... })可以临时开启合法的注入上下文便于在测试代码里安全调用inject()。其他 DI 相关错误围绕 DI 域错误百科还覆盖了以下高频问题NG0200: Circular Dependency in DI两个或多个 Provider 之间形成循环依赖如 A 依赖 B、B 又依赖 A注入器无法确定构造顺序。NG0204: Invalid Injection Token向注入器请求的 Token 不是合法的InjectionToken、类或字符串。NG0205: Injector has already been destroyed对已销毁的注入器执行注入。从源码看该错误由 packages/core/src/di/r3_injector.ts 中检查注入器destroyed状态的逻辑抛出对应RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED -205。常见于在异步回调或已销毁的组件/模块作用域内继续请求依赖。NG0207: EnvironmentProviders in wrong contextEnvironmentProviders如provideRouter、importProvidersFrom的返回值被错误地放进了非环境注入器如组件级providers。源码中对应的校验逻辑同样位于 packages/core/src/render3/errors_di.tsPROVIDER_IN_WRONG_CONTEXT。NG0209: Invalid multi providermulti: true的 Provider 配置不合法例如与其他配置冲突。这些错误的修复共性在于理解 Angular 的注入器层级EnvironmentInjector根/平台级与NodeInjector组件/指令级各自拥有独立的 Provider 可见域Provider 必须注册在“发起注入的那个注入器或其祖先注入器”上。变更检测与模板渲染错误NG0100、NG03xx、NG8xxxNG0100Expression Changed After CheckedNG0100: Expression Changed After Checked 是 Angular 开发者最常遇到的运行时错误之一Angular 在一个表达式值在变更检测完成之后发生变化时抛出ExpressionChangedAfterItHasBeenCheckedError。Angular 仅在开发模式下抛出此错误。其机制是开发模式下Angular 在每次变更检测运行之后会额外执行一次校验checkNoChanges 模式确保绑定没有发生变化。这能捕获“视图处于不一致状态”的问题。典型触发场景包括方法或 getter 每次调用返回不同值子组件修改了父组件的值在ngAfterViewInit、ngOnChanges等生命周期钩子中同步修改绑定加载状态与异步操作导致的值变化。该错误的存在是为了保证数据始终正确反映在视图中避免界面行为异常甚至死循环。调试方法利用 CLI 生成的 source map沿着调用栈向上找到“错误信息中值发生变化的那个模板表达式”确保变更检测运行之后绑定不再变化。这通常意味着改用正确的生命周期钩子——例如ngAfterViewInit中需要设置初始值时应改用构造函数或ngOnInit其他值绑定可考虑ngAfterContentInit。如果视图绑定的是方法调用需确保该方法不会更新模板中的其他绑定。从源码看错误消息由 packages/core/src/render3/errors.ts 中的throwErrorIfNoChangesMode函数构造它会拼接“Previous value … Current value …”以及表达式所在的组件类名并附上“视图是否在变更检测钩子中创建”的提示同时getExpressionChangedErrorDetails负责利用插值元数据还原出具体的属性名与新旧值方便开发者精确定位。这也解释了为什么错误消息里能看到“Expression location: XxxComponent”。模板渲染类错误NG03xxNG0300: Selector Collision多个指令/组件声明了相同的元素选择器Angular 无法确定由谁匹配该元素。NG0301: Export Not Found模板中通过#ref或exportAs引用的导出名称在当前指令/组件上不存在。NG0302: Pipe Not Found模板中使用了未在模块/组件中声明或导入的管道。NG0318: Invalid style property binding value样式属性绑定如[style.width]的值非法。这些错误大多能在编译期或渲染期由 Angular 运行时直接给出清晰的修复指引如“在 NgModule 的 declarations 中声明该管道”因此修复的关键是回到对应的组件与模块声明处补齐注册关系。模板编译错误NG8xxx编译错误由 Angular 编译器在构建阶段报告常见于模板校验NG8001: Invalid Element模板中使用了无法识别的 HTML 元素可能因拼写错误、未声明组件或元素确实不存在于标准 HTML 中。NG8002: Invalid Attribute元素上出现了无效属性如拼写错误的绑定[classs]。NG8003: Missing Reference Target#ref引用在模板中找不到对应的指令或元素目标。NG8023: Multiple Components Match Same Element多个组件声明了相同的选择器并同时匹配同一元素。运行时版本由 packages/core/src/render3/errors.ts 中的throwMultipleComponentError抛出对应RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH错误信息会列出两个冲突组件的类名。NG8024: Conflicting Host Directive Binding宿主指令与组件在同一个宿主元素上绑定了冲突的属性。处理这类错误时先仔细阅读编译器给出的“位置 期望值”提示再回到对应模板文件修正选择器、属性名或组件声明。SSR 与水合Hydration错误NG05xxDOM 不一致的根源SSR服务端渲染与客户端水合是 Angular 现代应用的常见形态水合阶段对“服务端产出的 DOM”与“客户端首次渲染的 DOM”要求严格一致由此产生了一批专用错误码。NG0500Hydration Node MismatchNG0500: Hydration Node Mismatch 的含义是水合过程中Angular 期望 DOM 结构与服务端渲染时标注的结构一致但客户端上的 DOM 树与服务端渲染出的 DOM 树不同。典型触发原因包括使用原生浏览器 API 直接操作 DOM如document.createElementinsertBefore改变了 Angular 产生的 DOM 结构使用innerHTML/outerHTML设置 HTML 内容同样绕过了 Angular 的渲染管线。文档给出了一段会触发该错误的示例代码在ngOnInit中向组件宿主元素的最前面插入一个手动创建的p元素Angular 按模板预期在首个子节点位置找div从而产生不匹配。正确的做法是改用原生 Angular API 重构组件模板把p写进模板通过*ngIf/if控制而不是手动操作 DOM。调试要点浏览器控制台中的错误信息会明确指出出问题的 DOM 片段重点检查该区域是否存在原生 DOM 操作检查模板是否为合法的 HTML 结构详见水合指南万不得已时可给组件宿主节点添加ngSkipHydration属性这会禁用该组件及其子组件的水合但文档强调它只应作为最后手段本质上应被视为需要修复的 bug若开发环境正常、生产构建报错需确认浏览器收到的服务端 HTML 中保留了 Angular 生成的注释节点它们是视图容器的锚点水合过程依赖这些节点。如果自定义逻辑或 CDN 配置移除了这些注释节点请禁用移除逻辑后再验证。从源码看该错误的抛出位于 packages/core/src/hydration/error_handling.tsRuntimeErrorCode.HYDRATION_NODE_MISMATCH -500以及 packages/core/src/render3/instructions/element.ts 中创建元素指令对水合节点进行校验的位置错误码常量统一维护在 packages/core/src/errors.ts。水合错误家族NG0501–NG0507 与 NG05000NG0501: Hydration Missing Siblings水合时缺少预期的兄弟节点如模板中*ngIf/if产生的兄弟注释节点缺失。NG0502: Hydration Missing Node水合时缺少预期的节点。NG0503: Hydration Unsupported Projection of DOM Nodes使用了水合不支持的 DOM 节点投影方式如ngProjectAs配合手动节点。NG0504: Skip hydration flag is applied to an invalid nodengSkipHydration被应用到了不合法的节点上例如非组件宿主节点。NG0505: No hydration info in server response服务端响应中缺少水合所需的标注信息通常意味着 SSR 产物没有被正确的水合注解。NG0506: NgZone remains unstable水合完成前 NgZone 一直处于不稳定状态常见于 SSR 后有持续运行的异步任务。NG0507: HTML content was altered after SSR服务端渲染完成后 HTML 内容被改动如 CDN 或中间层重写了响应。NG05000: Hydration with unsupported Zone.js instance水合与不支持的 Zone.js 实例组合使用。这些错误共同指向一个核心实践保证服务端与客户端渲染出完全一致的 DOM。凡是涉及第三方库直接操作 DOM、动态注入 HTML、或者渲染后被外部改写内容都可能触发这一类错误。与 SSR 运行环境相关的其他错误NG05104: Root element was not found启动引导时找不到根元素如index.html中缺少app-root或指定 selector 的元素。NG05106: Insertion reference node not found向 DOM 插入内容时引用的锚点节点不存在。NG05703: Suspicious URL origin change during SSRSSR 过程中 URL 来源发生了可疑变化例如window.location在服务端与客户端不一致。NG0401: Missing platform缺少平台初始化如未调用platformBrowserDynamic()或未在 SSR 场景引导platformServer。NG0403: Bootstrapped NgModule doesnt specify which component to initializebootstrap启动的 NgModule 没有声明要初始化的根组件。信号Signals与响应式特性错误NG09xx、NG06xx、NG075xAngular 的信号Signal体系带来了一组新错误码反映新的响应式约束NG0602: Disallowed function call inside reactive context在响应式上下文如计算属性computed、效果effect的求值过程中调用了被禁止的函数如afterNextRender、afterRender等只能在响应式上下文外使用的 API。NG0910: Unsafe bindings on an iframe element在iframe元素上使用了不安全的绑定如将不受信任的字符串绑定到src/srcdoc可能引入安全风险。NG0912: Component ID generation collision组件 ID 生成发生碰撞通常与自定义id或样式作用域计算冲突有关。NG0913: Runtime Performance Warnings运行时性能告警提示某段代码可能拖慢变更检测。NG0919: Circular Dependency Detected检测到循环依赖与 DI 循环不同这里偏向于信号/表达式求值链路中的循环。NG0950: Required input is accessed before a value is set在必填输入input.required()尚未被赋值前就访问了它。NG0951: Child query result is required but no value is available必填的子查询viewChild.required()/contentChild.required()当前没有匹配结果。NG0955: Track expression resulted in duplicated keys for a given collectionfor的track表达式在同一集合中产生了重复的键违反 track 唯一性约束。NG0956: Tracking expression caused re-creation of the DOM structuretrack表达式导致 DOM 结构被反复重建影响性能与稳定性。NG0991: Resource completed before producing a valueresource/rxResource在产生值之前就完成了。这类错误提醒我们信号体系要求开发者遵循“读取-计算”的约束不可在响应式求值中执行副作用或调用受限 APIfor循环必须提供稳定且唯一的track键必填输入/查询必须在值就绪后再读取。defer 相关错误NG0750、NG0751NG0750: defer dependencies failed to loaddefer块中声明的懒加载依赖组件、指令、管道或导入加载失败常见于网络错误或资源路径错误。NG0751: defer behavior when HMR is enabled热模块替换HMR开启时defer的特殊行为提示通常伴随开发体验相关说明。使用defer时应确保懒加载目标在构建配置中可被正确分块并关注 HMR 场景下的缓存一致性。表单、HttpClient 与框架工具类错误响应式表单类NG01002、NG01101、NG01203、NG01902、NG02200NG01002: Missing Control Value表单控件缺少值如 signal forms 中控件值未初始化。NG01101: Wrong Async Validator Return Type异步验证器返回了错误类型必须是ObservableValidationErrors | null。NG01203: Missing value accessor表单指令如formControlName、ngModel找不到对应的ControlValueAccessor通常因为使用了不受支持的原生元素或自定义组件未实现ControlValueAccessor。NG01902: Orphan field in signal formssignal forms 中存在“孤儿字段”未被表单树正确关联的字段。NG02200: Missing Iterable Differ*ngFor或需要迭代器支持的结构指令缺少 IterableDiffer 支持例如迭代了不满足Iterable契约的对象。HttpClient 与传输层NG02800、NG02802、NG02825NG02800: JSONP support in HttpClient configuration使用 JSONP 请求但未正确配置 HttpClient 的 JSONP 支持需引入HttpClientJsonpModule或对应 provider。NG02802: Headers not transferred by HttpTransferCacheHttpTransferCacheSSR 传输缓存未转移某些响应头。NG02825: Fetch response body exceeds the configured limitfetch响应体大小超过配置的缓存/传输上限。这类错误提醒我们在使用表单与 HTTP 功能时要同时检查“类型契约”验证器返回类型、value accessor 实现与“配置项”JSONP 模块、传输缓存上限。编译器域错误NG1001–NG6100除模板编译错误外编译器还报告以下问题NG1001: Argument Not Literal某个要求字面量实参的位置传入了非字面量如装饰器元数据中的参数必须为字面量。NG2003: Missing Token编译器缺少必要的 Token常见于.d.ts解析或装饰器参数解析失败。NG2009: Invalid Shadow DOM selectorencapsulation: ViewEncapsulation.ShadowDom下使用了非法的选择器。NG3003: Import Cycle Detected检测到模块导入环影响 tree-shaking 与初始化顺序。NG6100: NgModule.id Set to module.id anti-pattern将NgModule.id设为module.id属于反模式应避免。其中NG3003对大型应用尤为重要模块导入环会破坏懒加载分块与依赖顺序应在架构层面通过提取公共模块来消除循环引用。常见调试方法论总结结合错误百科与源码可以提炼出一套通用的NG错误调试流程看错误码首段NG02xx→ DING03xx/NG8xxx→ 模板渲染/编译NG05xx→ 水合/SSRNG09xx→ 信号与响应式NG01xxx/NG02xxx→ 表单/迭代器NG028xx→ HTTP。读错误消息Angular 的运行时错误RuntimeError通常包含触发组件类名、属性名、旧值/新值、注入链路径等定位信息这些信息由 packages/core/src/render3/errors.ts 与 packages/core/src/render3/errors_di.ts 等模块组装。按条目文档定位在错误百科目录adev/src/content/reference/errors/中打开对应错误码条目阅读其“触发场景 → 调试步骤 → 修复代码”三段落。回到源码验证对想深究的错误可在仓库中搜索RuntimeErrorCode.xxx常量定义于 packages/core/src/errors.ts找到真正的抛出点确认触发路径与修复方向。区分开发/生产差异部分错误如NG0100仅开发模式抛出部分水合错误则只在生产构建中暴露如注释节点被移除的情况务必在两种模式下分别验证。通过“错误码表 条目文档 框架源码”三层信息联动开发者可以在遇到任意NG前缀错误时快速定位根因并给出可靠的修复方案这正是 Angular 错误百科overview.md为社区提供的核心价值。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Angular 错误百科：NG 运行时错误与编译错误全指南（基于 Angular 官方仓库）
Angular 错误百科NG 运行时错误与编译错误全指南基于 Angular 官方仓库【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular本篇指南基于 Angular 官方仓库中的错误百科adev/src/content/reference/errors/overview.md及其配套的 61 个独立错误条目文档系统梳理 Angular 应用在开发与运行中最常见的NG前缀错误码涵盖依赖注入、变更检测、SSR 水合Hydration、信号Signals、响应式表单、HttpClient 等核心模块的运行时错误以及模板编译阶段的编译器错误。读完本文你将能够根据错误码快速定位问题根因理解每条错误的触发条件、调试方法与修复路径并知晓这些错误在框架源码中的真实抛出位置。错误百科的总体结构在 Angular 仓库中错误百科位于 adev/src/content/reference/errors/其入口文件 overview.md 将全部错误分为两大类Runtime errors运行时错误应用在浏览器或 SSR 服务器端实际运行期间抛出的错误例如依赖注入找不到 Provider、变更检测不稳定、水合节点不匹配等。Compiler errors编译错误模板与组件在编译阶段被 Angular 编译器检查出的错误例如模板中使用了未声明的元素或属性、选择器冲突等。每个错误码都有对应的独立 Markdown 条目文档如 NG0100.md、NG0201.md采用统一的“错误含义 → 触发场景 → 调试步骤 → 修复方案含代码示例”结构编写方便开发者按码索骥。下表给出运行时错误码的一览CodeNameNG0100Expression Changed After CheckedNG0200Circular Dependency in DING0201No Provider FoundNG0203inject()must be called from an injection contextNG0204Invalid Injection TokenNG0205Injector has already been destroyedNG0207EnvironmentProviders in wrong contextNG0209Invalid multi providerNG0300Selector CollisionNG0301Export Not FoundNG0302Pipe Not FoundNG0318Invalid style property binding valueNG0401Missing platformNG0403Bootstrapped NgModule doesnt specify which component to initializeNG0500Hydration Node MismatchNG0501Hydration Missing SiblingsNG0502Hydration Missing NodeNG0503Hydration Unsupported Projection of DOM NodesNG0504Skip hydration flag is applied to an invalid nodeNG0505No hydration info in server responseNG0506NgZone remains unstableNG0507HTML content was altered after SSRNG0602Disallowed function call inside reactive contextNG0750defer dependencies failed to loadNG0751defer behavior when HMR is enabledNG0910Unsafe bindings on an iframe elementNG0912Component ID generation collisionNG0913Runtime Performance WarningsNG0919Circular Dependency DetectedNG0950Required input is accessed before a value is setNG0951Child query result is required but no value is availableNG0955Track expression resulted in duplicated keys for a given collectionNG0956Tracking expression caused re-creation of the DOM structureNG0991Resource completed before producing a valueNG01002Missing Control ValueNG01101Wrong Async Validator Return TypeNG01203Missing value accessorNG01902Orphan field in signal formsNG02200Missing Iterable DifferNG02800JSONP support in HttpClient configurationNG02802Headers not transferred by HttpTransferCacheNG02825Fetch response body exceeds the configured limitNG05000Hydration with unsupported Zone.js instance.NG05104Root element was not found.NG05106Insertion reference node not foundNG05703Suspicious URL origin change during SSR编译错误码一览CodeNameNG1001Argument Not LiteralNG2003Missing TokenNG2009Invalid Shadow DOM selectorNG3003Import Cycle DetectedNG6100NgModule.id Set to module.id anti-patternNG8001Invalid ElementNG8002Invalid AttributeNG8003Missing Reference TargetNG8023Multiple Components Match Same ElementNG8024Conflicting Host Directive Binding从编号规律可以观察到Angular 错误码并非随机分配NG02xx集中于依赖注入DI域NG05xx集中于水合Hydration域NG09xx集中于信号与变更检测相关的新特性NG8xxx则属于模板编译器错误NG1xxx/NG2xxx/NG3xxx覆盖编译器内部的参数、Token 与导入环检测。这种分区式编号便于开发者从错误码首段数字快速判断问题所属模块。依赖注入类错误NG02xxProvider、注入上下文与多 Provider依赖注入DI是 Angular 的核心机制也是最容易产生运行时错误的部分。以 NG0201: No Provider Found 为例当你尝试注入某个服务却没有为其声明对应的 Provider 时就会看到此错误。Provider 是一种映射关系它提供可以注入到应用类构造函数中的值。该错误的典型调试路径是从报错提示No provider for ${token}!的对象出发反向排查。该错误通常出现在依赖了某个不存在的 Provider 的服务中。修复方法有两类确保服务已注册到某个NgModule的providers列表中或在服务类上添加Injectable()文档中写作Service()装饰器Injectable() export class MyService {}从源码角度看这条错误的真正抛出位置在 packages/core/src/render3/errors_di.ts 的throwProviderNotFoundError函数中它组装出No provider for ${token} found的错误消息并抛出RuntimeErrorCode.PROVIDER_NOT_FOUND对应的RuntimeError错误码常量定义位于 packages/core/src/errors.ts。理解这一层有助于开发者在错误堆栈中快速识别“是谁在注入、注入器在哪一层”的关键信息。注入上下文约束NG0203NG0203:inject()must be called from an injection context 专门约束inject()函数的使用位置。合法的注入上下文包括类的构造阶段构造函数、构造函数参数、字段初始化器以及runInInjectionContext包裹的函数Injectable() export class Car { radio: Radio | undefined; // OK: 字段初始化器 spareTyre inject(Tyre); constructor() { // OK: 构造函数体 this.radio inject(Radio); } }也允许在 Provider 的工厂函数中调用providers: [ { provide: Car, useFactory: () { // OK: 类工厂 const engine inject(Engine); return new Car(engine); }, }, ];而在类实例创建完成之后例如生命周期钩子中调用inject()是非法的Component({ ... }) export class Car { ngOnInit() { // ERROR: 太晚了组件实例已经被创建 const engine inject(Engine); engine.start(); } }调试建议从错误堆栈反向定位非法的inject()调用位置把它移动到构造函数或字段初始化器中。特别地在测试环境中TestBed.runInInjectionContext(() { ... })可以临时开启合法的注入上下文便于在测试代码里安全调用inject()。其他 DI 相关错误围绕 DI 域错误百科还覆盖了以下高频问题NG0200: Circular Dependency in DI两个或多个 Provider 之间形成循环依赖如 A 依赖 B、B 又依赖 A注入器无法确定构造顺序。NG0204: Invalid Injection Token向注入器请求的 Token 不是合法的InjectionToken、类或字符串。NG0205: Injector has already been destroyed对已销毁的注入器执行注入。从源码看该错误由 packages/core/src/di/r3_injector.ts 中检查注入器destroyed状态的逻辑抛出对应RuntimeErrorCode.INJECTOR_ALREADY_DESTROYED -205。常见于在异步回调或已销毁的组件/模块作用域内继续请求依赖。NG0207: EnvironmentProviders in wrong contextEnvironmentProviders如provideRouter、importProvidersFrom的返回值被错误地放进了非环境注入器如组件级providers。源码中对应的校验逻辑同样位于 packages/core/src/render3/errors_di.tsPROVIDER_IN_WRONG_CONTEXT。NG0209: Invalid multi providermulti: true的 Provider 配置不合法例如与其他配置冲突。这些错误的修复共性在于理解 Angular 的注入器层级EnvironmentInjector根/平台级与NodeInjector组件/指令级各自拥有独立的 Provider 可见域Provider 必须注册在“发起注入的那个注入器或其祖先注入器”上。变更检测与模板渲染错误NG0100、NG03xx、NG8xxxNG0100Expression Changed After CheckedNG0100: Expression Changed After Checked 是 Angular 开发者最常遇到的运行时错误之一Angular 在一个表达式值在变更检测完成之后发生变化时抛出ExpressionChangedAfterItHasBeenCheckedError。Angular 仅在开发模式下抛出此错误。其机制是开发模式下Angular 在每次变更检测运行之后会额外执行一次校验checkNoChanges 模式确保绑定没有发生变化。这能捕获“视图处于不一致状态”的问题。典型触发场景包括方法或 getter 每次调用返回不同值子组件修改了父组件的值在ngAfterViewInit、ngOnChanges等生命周期钩子中同步修改绑定加载状态与异步操作导致的值变化。该错误的存在是为了保证数据始终正确反映在视图中避免界面行为异常甚至死循环。调试方法利用 CLI 生成的 source map沿着调用栈向上找到“错误信息中值发生变化的那个模板表达式”确保变更检测运行之后绑定不再变化。这通常意味着改用正确的生命周期钩子——例如ngAfterViewInit中需要设置初始值时应改用构造函数或ngOnInit其他值绑定可考虑ngAfterContentInit。如果视图绑定的是方法调用需确保该方法不会更新模板中的其他绑定。从源码看错误消息由 packages/core/src/render3/errors.ts 中的throwErrorIfNoChangesMode函数构造它会拼接“Previous value … Current value …”以及表达式所在的组件类名并附上“视图是否在变更检测钩子中创建”的提示同时getExpressionChangedErrorDetails负责利用插值元数据还原出具体的属性名与新旧值方便开发者精确定位。这也解释了为什么错误消息里能看到“Expression location: XxxComponent”。模板渲染类错误NG03xxNG0300: Selector Collision多个指令/组件声明了相同的元素选择器Angular 无法确定由谁匹配该元素。NG0301: Export Not Found模板中通过#ref或exportAs引用的导出名称在当前指令/组件上不存在。NG0302: Pipe Not Found模板中使用了未在模块/组件中声明或导入的管道。NG0318: Invalid style property binding value样式属性绑定如[style.width]的值非法。这些错误大多能在编译期或渲染期由 Angular 运行时直接给出清晰的修复指引如“在 NgModule 的 declarations 中声明该管道”因此修复的关键是回到对应的组件与模块声明处补齐注册关系。模板编译错误NG8xxx编译错误由 Angular 编译器在构建阶段报告常见于模板校验NG8001: Invalid Element模板中使用了无法识别的 HTML 元素可能因拼写错误、未声明组件或元素确实不存在于标准 HTML 中。NG8002: Invalid Attribute元素上出现了无效属性如拼写错误的绑定[classs]。NG8003: Missing Reference Target#ref引用在模板中找不到对应的指令或元素目标。NG8023: Multiple Components Match Same Element多个组件声明了相同的选择器并同时匹配同一元素。运行时版本由 packages/core/src/render3/errors.ts 中的throwMultipleComponentError抛出对应RuntimeErrorCode.MULTIPLE_COMPONENTS_MATCH错误信息会列出两个冲突组件的类名。NG8024: Conflicting Host Directive Binding宿主指令与组件在同一个宿主元素上绑定了冲突的属性。处理这类错误时先仔细阅读编译器给出的“位置 期望值”提示再回到对应模板文件修正选择器、属性名或组件声明。SSR 与水合Hydration错误NG05xxDOM 不一致的根源SSR服务端渲染与客户端水合是 Angular 现代应用的常见形态水合阶段对“服务端产出的 DOM”与“客户端首次渲染的 DOM”要求严格一致由此产生了一批专用错误码。NG0500Hydration Node MismatchNG0500: Hydration Node Mismatch 的含义是水合过程中Angular 期望 DOM 结构与服务端渲染时标注的结构一致但客户端上的 DOM 树与服务端渲染出的 DOM 树不同。典型触发原因包括使用原生浏览器 API 直接操作 DOM如document.createElementinsertBefore改变了 Angular 产生的 DOM 结构使用innerHTML/outerHTML设置 HTML 内容同样绕过了 Angular 的渲染管线。文档给出了一段会触发该错误的示例代码在ngOnInit中向组件宿主元素的最前面插入一个手动创建的p元素Angular 按模板预期在首个子节点位置找div从而产生不匹配。正确的做法是改用原生 Angular API 重构组件模板把p写进模板通过*ngIf/if控制而不是手动操作 DOM。调试要点浏览器控制台中的错误信息会明确指出出问题的 DOM 片段重点检查该区域是否存在原生 DOM 操作检查模板是否为合法的 HTML 结构详见水合指南万不得已时可给组件宿主节点添加ngSkipHydration属性这会禁用该组件及其子组件的水合但文档强调它只应作为最后手段本质上应被视为需要修复的 bug若开发环境正常、生产构建报错需确认浏览器收到的服务端 HTML 中保留了 Angular 生成的注释节点它们是视图容器的锚点水合过程依赖这些节点。如果自定义逻辑或 CDN 配置移除了这些注释节点请禁用移除逻辑后再验证。从源码看该错误的抛出位于 packages/core/src/hydration/error_handling.tsRuntimeErrorCode.HYDRATION_NODE_MISMATCH -500以及 packages/core/src/render3/instructions/element.ts 中创建元素指令对水合节点进行校验的位置错误码常量统一维护在 packages/core/src/errors.ts。水合错误家族NG0501–NG0507 与 NG05000NG0501: Hydration Missing Siblings水合时缺少预期的兄弟节点如模板中*ngIf/if产生的兄弟注释节点缺失。NG0502: Hydration Missing Node水合时缺少预期的节点。NG0503: Hydration Unsupported Projection of DOM Nodes使用了水合不支持的 DOM 节点投影方式如ngProjectAs配合手动节点。NG0504: Skip hydration flag is applied to an invalid nodengSkipHydration被应用到了不合法的节点上例如非组件宿主节点。NG0505: No hydration info in server response服务端响应中缺少水合所需的标注信息通常意味着 SSR 产物没有被正确的水合注解。NG0506: NgZone remains unstable水合完成前 NgZone 一直处于不稳定状态常见于 SSR 后有持续运行的异步任务。NG0507: HTML content was altered after SSR服务端渲染完成后 HTML 内容被改动如 CDN 或中间层重写了响应。NG05000: Hydration with unsupported Zone.js instance水合与不支持的 Zone.js 实例组合使用。这些错误共同指向一个核心实践保证服务端与客户端渲染出完全一致的 DOM。凡是涉及第三方库直接操作 DOM、动态注入 HTML、或者渲染后被外部改写内容都可能触发这一类错误。与 SSR 运行环境相关的其他错误NG05104: Root element was not found启动引导时找不到根元素如index.html中缺少app-root或指定 selector 的元素。NG05106: Insertion reference node not found向 DOM 插入内容时引用的锚点节点不存在。NG05703: Suspicious URL origin change during SSRSSR 过程中 URL 来源发生了可疑变化例如window.location在服务端与客户端不一致。NG0401: Missing platform缺少平台初始化如未调用platformBrowserDynamic()或未在 SSR 场景引导platformServer。NG0403: Bootstrapped NgModule doesnt specify which component to initializebootstrap启动的 NgModule 没有声明要初始化的根组件。信号Signals与响应式特性错误NG09xx、NG06xx、NG075xAngular 的信号Signal体系带来了一组新错误码反映新的响应式约束NG0602: Disallowed function call inside reactive context在响应式上下文如计算属性computed、效果effect的求值过程中调用了被禁止的函数如afterNextRender、afterRender等只能在响应式上下文外使用的 API。NG0910: Unsafe bindings on an iframe element在iframe元素上使用了不安全的绑定如将不受信任的字符串绑定到src/srcdoc可能引入安全风险。NG0912: Component ID generation collision组件 ID 生成发生碰撞通常与自定义id或样式作用域计算冲突有关。NG0913: Runtime Performance Warnings运行时性能告警提示某段代码可能拖慢变更检测。NG0919: Circular Dependency Detected检测到循环依赖与 DI 循环不同这里偏向于信号/表达式求值链路中的循环。NG0950: Required input is accessed before a value is set在必填输入input.required()尚未被赋值前就访问了它。NG0951: Child query result is required but no value is available必填的子查询viewChild.required()/contentChild.required()当前没有匹配结果。NG0955: Track expression resulted in duplicated keys for a given collectionfor的track表达式在同一集合中产生了重复的键违反 track 唯一性约束。NG0956: Tracking expression caused re-creation of the DOM structuretrack表达式导致 DOM 结构被反复重建影响性能与稳定性。NG0991: Resource completed before producing a valueresource/rxResource在产生值之前就完成了。这类错误提醒我们信号体系要求开发者遵循“读取-计算”的约束不可在响应式求值中执行副作用或调用受限 APIfor循环必须提供稳定且唯一的track键必填输入/查询必须在值就绪后再读取。defer 相关错误NG0750、NG0751NG0750: defer dependencies failed to loaddefer块中声明的懒加载依赖组件、指令、管道或导入加载失败常见于网络错误或资源路径错误。NG0751: defer behavior when HMR is enabled热模块替换HMR开启时defer的特殊行为提示通常伴随开发体验相关说明。使用defer时应确保懒加载目标在构建配置中可被正确分块并关注 HMR 场景下的缓存一致性。表单、HttpClient 与框架工具类错误响应式表单类NG01002、NG01101、NG01203、NG01902、NG02200NG01002: Missing Control Value表单控件缺少值如 signal forms 中控件值未初始化。NG01101: Wrong Async Validator Return Type异步验证器返回了错误类型必须是ObservableValidationErrors | null。NG01203: Missing value accessor表单指令如formControlName、ngModel找不到对应的ControlValueAccessor通常因为使用了不受支持的原生元素或自定义组件未实现ControlValueAccessor。NG01902: Orphan field in signal formssignal forms 中存在“孤儿字段”未被表单树正确关联的字段。NG02200: Missing Iterable Differ*ngFor或需要迭代器支持的结构指令缺少 IterableDiffer 支持例如迭代了不满足Iterable契约的对象。HttpClient 与传输层NG02800、NG02802、NG02825NG02800: JSONP support in HttpClient configuration使用 JSONP 请求但未正确配置 HttpClient 的 JSONP 支持需引入HttpClientJsonpModule或对应 provider。NG02802: Headers not transferred by HttpTransferCacheHttpTransferCacheSSR 传输缓存未转移某些响应头。NG02825: Fetch response body exceeds the configured limitfetch响应体大小超过配置的缓存/传输上限。这类错误提醒我们在使用表单与 HTTP 功能时要同时检查“类型契约”验证器返回类型、value accessor 实现与“配置项”JSONP 模块、传输缓存上限。编译器域错误NG1001–NG6100除模板编译错误外编译器还报告以下问题NG1001: Argument Not Literal某个要求字面量实参的位置传入了非字面量如装饰器元数据中的参数必须为字面量。NG2003: Missing Token编译器缺少必要的 Token常见于.d.ts解析或装饰器参数解析失败。NG2009: Invalid Shadow DOM selectorencapsulation: ViewEncapsulation.ShadowDom下使用了非法的选择器。NG3003: Import Cycle Detected检测到模块导入环影响 tree-shaking 与初始化顺序。NG6100: NgModule.id Set to module.id anti-pattern将NgModule.id设为module.id属于反模式应避免。其中NG3003对大型应用尤为重要模块导入环会破坏懒加载分块与依赖顺序应在架构层面通过提取公共模块来消除循环引用。常见调试方法论总结结合错误百科与源码可以提炼出一套通用的NG错误调试流程看错误码首段NG02xx→ DING03xx/NG8xxx→ 模板渲染/编译NG05xx→ 水合/SSRNG09xx→ 信号与响应式NG01xxx/NG02xxx→ 表单/迭代器NG028xx→ HTTP。读错误消息Angular 的运行时错误RuntimeError通常包含触发组件类名、属性名、旧值/新值、注入链路径等定位信息这些信息由 packages/core/src/render3/errors.ts 与 packages/core/src/render3/errors_di.ts 等模块组装。按条目文档定位在错误百科目录adev/src/content/reference/errors/中打开对应错误码条目阅读其“触发场景 → 调试步骤 → 修复代码”三段落。回到源码验证对想深究的错误可在仓库中搜索RuntimeErrorCode.xxx常量定义于 packages/core/src/errors.ts找到真正的抛出点确认触发路径与修复方向。区分开发/生产差异部分错误如NG0100仅开发模式抛出部分水合错误则只在生产构建中暴露如注释节点被移除的情况务必在两种模式下分别验证。通过“错误码表 条目文档 框架源码”三层信息联动开发者可以在遇到任意NG前缀错误时快速定位根因并给出可靠的修复方案这正是 Angular 错误百科overview.md为社区提供的核心价值。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考