{"record":{"id":"f6649670577d0af8","repo":"TanStack/table","slug":"tanstack-table-angular-the-provided-symbol-is-n","errorCode":null,"errorMessage":"[@tanstack-table/angular] The provided symbol is not a component","messagePattern":"\\[@tanstack-table/angular\\] The provided symbol is not a component","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/angular-table/src/flex-render/flexRenderComponent.ts","lineNumber":332,"sourceCode":"  }\n}\n\ninterface ResolvedComponentMetadata<TComponent = unknown> {\n  readonly mirror: ComponentMirror<TComponent>\n  readonly inputNames: ReadonlyMap<string, string>\n  readonly outputNames: ReadonlySet<string>\n}\n\nconst typeCache = new WeakMap<Type<unknown>, ResolvedComponentMetadata>()\n\nfunction resolveComponentTypeMetadata<T>(\n  type: Type<T>,\n): ResolvedComponentMetadata<T> {\n  let metadata = typeCache.get(type) as ResolvedComponentMetadata<T> | undefined\n  if (metadata) return metadata\n  const mirror = reflectComponentType(type)\n  if (!mirror) {\n    throw new Error(\n      `[@tanstack-table/angular] The provided symbol is not a component`,\n    )\n  }\n  const inputNames = new Map<string, string>()\n  const outputNames = new Set<string>()\n  for (const input of mirror.inputs) {\n    inputNames.set(input.propName, input.templateName)\n    if (input.templateName !== input.propName) {\n      inputNames.set(input.templateName, input.templateName)\n    }\n  }\n  for (const output of mirror.outputs) {\n    // Outputs are read from the component instance, so only their class\n    // property names are valid here. Template aliases are not instance keys.\n    outputNames.add(output.propName)\n  }\n  metadata = { mirror, inputNames, outputNames }\n  typeCache.set(type, metadata)","sourceCodeStart":314,"sourceCodeEnd":350,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/angular-table/src/flex-render/flexRenderComponent.ts#L314-L350","documentation":"resolveComponentTypeMetadata uses Angular's reflectComponentType to read @Component metadata from a Type passed to FlexRenderComponent. If the value is a class but has no component metadata (not decorated with @Component, or metadata not preserved by the build), the mirror is null and this error is thrown.","triggerScenarios":"Passing a non-component class (plain class, directive, or a class whose @Component decorator was stripped by a build misconfiguration) as the component argument to FlexRenderComponent, so reflectComponentType(type) returns null.","commonSituations":"Using FlexRender with a header/cell component defined without @Component; JIT/AOT misconfiguration where decorators are removed (e.g. missing angularCompilerOptions, running TS without emitDecoratorMetadata path expected by Angular); passing an injected abstract class.","solutions":["Ensure the value passed to FlexRenderComponent is a class decorated with @Component({...})","Check that decorators are not stripped at build time (correct tsconfig target/useDefineForClassFields and Angular compiler settings; don't run esbuild/swc without the Angular plugin)","Verify imports resolve to the decorated component class, not a re-exported or duplicate undecorated copy"],"exampleFix":"// before\nclass UserCell { } // no decorator\nflexRenderComponent(UserCell); // throws\n// after\n@Component({ selector: 'user-cell', template: '{{ value() }}' })\nclass UserCell { }\nflexRenderComponent(UserCell); // works","handlingStrategy":"validation","validationCode":"import { reflectComponentType } from '@angular/core';\nif (!reflectComponentType(maybeComponent)) {\n  throw new Error('Expected an @Component-decorated class for FlexRender');\n}","typeGuard":"function isComponent<T>(t: Type<T> | unknown): t is Type<T> {\n  return typeof t === 'function' && !!reflectComponentType(t as Type<T>);\n}","tryCatchPattern":"try {\n  const comp = flexRenderComponent(type);\n} catch (e) {\n  if (e.message.includes('not a component')) {\n    console.error('Pass an @Component-decorated class to FlexRenderComponent:', type?.name);\n  } else { throw e; }\n}","preventionTips":["Always decorate classes passed to FlexRenderComponent with @Component","Verify build tooling preserves Angular decorators (Angular compiler plugin in esbuild/vite/webpack)","Check reflectComponentType() in dev assertions before passing dynamic types"],"tags":["angular","flex-render","component-metadata"],"backgroundTag":"not-a-component","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}