{"record":{"id":"0acfabdf72f7dbec","repo":"angular/components","slug":"tree-is-using-conflicting-node-types-which-can-cau","errorCode":null,"errorMessage":"Tree is using conflicting node types which can cause unexpected behavior. Please use tree nodes of the same type (e.g. only flat or only nested). Current node type: \"${currentType}\", new node type \"${newType}\".","messagePattern":"Tree is using conflicting node types which can cause unexpected behavior\\. Please use tree nodes of the same type \\(e\\.g\\. only flat or only nested\\)\\. Current node type: \"(.+?)\", new node type \"(.+?)\"\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/cdk/tree/tree.ts","lineNumber":331,"sourceCode":"    if (defaultNodeDefs.length > 1 && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw getTreeMultipleDefaultNodeDefsError();\n    }\n    this._defaultNodeDef = defaultNodeDefs[0];\n  }\n\n  /**\n   * Sets the node type for the tree, if it hasn't been set yet.\n   *\n   * This will be called by the first node that's rendered in order for the tree\n   * to determine what data transformations are required.\n   */\n  _setNodeTypeIfUnset(newType: 'flat' | 'nested') {\n    const currentType = this._nodeType.value;\n\n    if (currentType === null) {\n      this._nodeType.next(newType);\n    } else if ((typeof ngDevMode === 'undefined' || ngDevMode) && currentType !== newType) {\n      console.warn(\n        `Tree is using conflicting node types which can cause unexpected behavior. ` +\n          `Please use tree nodes of the same type (e.g. only flat or only nested). ` +\n          `Current node type: \"${currentType}\", new node type \"${newType}\".`,\n      );\n    }\n  }\n\n  /**\n   * Switch to the provided data source by resetting the data and unsubscribing from the current\n   * render change subscription if one exists. If the data source is null, interpret this by\n   * clearing the node outlet. Otherwise start listening for new data.\n   */\n  private _switchDataSource(dataSource: DataSource<T> | Observable<T[]> | T[]) {\n    if (this._dataSource && typeof (this._dataSource as DataSource<T>).disconnect === 'function') {\n      (this.dataSource as DataSource<T>).disconnect(this);\n    }\n\n    this._dataSubscription?.unsubscribe();","sourceCodeStart":313,"sourceCodeEnd":349,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/tree/tree.ts#L313-L349","documentation":"A CDK tree can be built with either flat nodes (`cdk-flat-tree`-style, `TreeFlattener`) or nested nodes (recursive `cdk-nested-tree`), but not both at once. `_setNodeTypeIfUnset` records the first node type seen and warns in dev mode when a second, different type appears, because mixing them causes undefined rendering/selection behavior.","triggerScenarios":"Declaring `mat-tree` children that mix `<mat-tree-node>` (flat) with `<mat-nested-tree-node>` (nested), or conditionally rendering both node kinds in the same tree template.","commonSituations":"Refactoring a flat tree to nested (or vice versa) and leaving old node templates in place; copying node templates between trees; dynamic template switches based on data.","solutions":["Use only one node type per tree: all `<mat-tree-node>` for flat trees, all `<mat-nested-tree-node>` for nested trees.","Delete leftover templates of the other node type from the tree's template.","If you need both forms, render two separate `mat-tree` components."],"exampleFix":"<!-- before -->\n<mat-tree [dataSource]=\"dataSource\">\n  <mat-tree-node *matTreeNodeDef=\"let node\">{{node.name}}</mat-tree-node>\n  <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">...</mat-nested-tree-node>\n</mat-tree>\n\n<!-- after (nested tree) -->\n<mat-tree [dataSource]=\"dataSource\">\n  <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">...</mat-nested-tree-node>\n</mat-tree>","handlingStrategy":"validation","validationCode":"// audit tree templates in CI\nconst flat = /<(mat|cdk)-tree-node/.test(tpl);\nconst nested = /<(mat|cdk)-nested-tree-node/.test(tpl);\nif (flat && nested) throw new Error('Mixed tree node types in ' + file);","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Pick flat or nested tree style per component and document it.","Keep one node template per tree; delete unused alternates.","Run dev-mode builds locally — this warning only appears when ngDevMode is active."],"tags":["angular","cdk","tree","template","dev-mode-warning"],"backgroundTag":"mixed-tree-node-types","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}