NbTreeGrid Error NullInjectorError: No provider for InjectionToken CDK_TABLE!

[darrenparkinson]

Issue type

I'm submitting a ... (check one with "x")

• [X] bug report
• [ ] feature request

Issue description

Current behavior:

When adding nbTreeGrid to my component, I get this error:

ERROR NullInjectorError: R3InjectorError(Standalone[_ProfileComponent])[InjectionToken CDK_TABLE -> InjectionToken CDK_TABLE -> InjectionToken CDK_TABLE -> InjectionToken CDK_TABLE]: NullInjectorError: No provider for InjectionToken CDK_TABLE!

Expected behavior:

I expect to not receive the error when following the installation information from the documentation here: https://akveo.github.io/nebular/docs/components/tree-grid/overview#nbtreegridcomponent

Steps to reproduce:

• Create a new component
• Add code as per the documentation (see below)
• Get the error

Related code:

<nb-card status="info">
    <nb-card-body>
        <table [nbTreeGrid]="data" equalColumnsWidth>
        </table>
    </nb-card-body>
</nb-card>

With the following in the component:

import { Component, Inject } from '@angular/core';
import { NbCardModule, NbTreeGridModule } from '@nebular/theme';

interface TreeNode<T> {
  data: T;
  children?: TreeNode<T>[];
  expanded?: boolean;
}

interface FSEntry {
  name: string;
  size: string;
  kind: string;
  items?: number;
}

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [NbCardModule, NbTreeGridModule],
  templateUrl: './profile.component.html',
  styleUrl: './profile.component.scss'
})
export class ProfileComponent {
  columns = ['item', 'value'];
  data: TreeNode<FSEntry>[] = []
  constructor() {}
}

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->
Node v18.17.1
NPM v9.6.7
OS: MacOS Sonoma 14.1.1
Browser: Chrome

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->
 "@angular/animations": "^17.1.0",
    "@angular/cdk": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "@nebular/eva-icons": "^13.0.0",
    "@nebular/security": "^13.0.0",
    "@nebular/theme": "^13.0.0",
    "bootstrap": "^5.3.2",
    "eva-icons": "^1.1.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"

[Szafa99]

same problem

[HitkoDev]

It seems to be related to some changes introduced in https://github.com/angular/components/pull/28356, you can try to set "@angular/cdk": "<17.1.0" until a fix is provided.

[crodriguez6497]

Same issue

[robkrzn]

Same issue

[pgrutsch]

Same issue

[diegoarndt]

I am facing the exact same issue

[pazdernikpavel]

Same problem here..

[jeroenpol]

It seems to be related to some changes introduced in angular/components#28356, you can try to set "@angular/cdk": "<17.1.0" until a fix is provided.

Remember that you also should override the dependency of @nebular/theme, otherwise Nebular will complain:

  "overrides": {
    "@nebular/theme": {
      "@angular/cdk": "<17.1.0"
    }
  }

[helberhlm]

Same problem here

[crodriguez6497]

Any update on this? Or perhaps any better alternative than setting @angular/cdk <17.1.0?

[adilld]

Same problem

[mannynable]

Same issue :(

[theophane-girard]

any news ?

[lvlkoo]

Any updates on this?

[jkneepkens]

We still get the error NullInjectorError: NullInjectorError: No provider for InjectionToken CDK_TABLE! after upgrading Nebular to v14, is there already a fix available (otherwise then use the "@angular/cdk": "<17.1.0" fix)?

[basvandorst]

Issue still exists with latest Angular & Nebular version:

core.mjs:7372 ERROR
NullInjectorError: NullInjectorError: No provider for InjectionToken CDK_TABLE!
    at NullInjector.get (core.mjs:1659:27)
    at R3Injector.get (core.mjs:3105:33)
    at R3Injector.get (core.mjs:3105:33)
    at R3Injector.get (core.mjs:3105:33)
    at R3Injector.get (core.mjs:3105:33)
    at R3Injector.get (core.mjs:3105:33)
    at ChainedInjector.get (core.mjs:5447:36)
    at lookupTokenUsingModuleInjector (core.mjs:5800:39)
    at getOrCreateInjectable (core.mjs:5848:12)
    at ɵɵdirectiveInject (core.mjs:11915:19)
Show 22 more frames

Steps to reproduce:

• Check out this repo
• Go to: Tree Grid Sortable

[Khalil-IT]

i still get the same error Angular CLI: 17.3.8 Node: 20.16.0 Package Manager: npm 10.8.1 OS: win32 x64

Angular: 17.3.12 ... animations, common, compiler, compiler-cli, core, forms ... localize, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1703.8 @angular-devkit/build-angular 17.3.8 @angular-devkit/core 17.3.8 @angular-devkit/schematics 17.3.8 @angular/cdk 17.3.10 @angular/cli 17.3.8 @angular/google-maps 17.0.1 @schematics/angular 17.3.8 rxjs 7.8.1 typescript 5.4.5 zone.js 0.14.10 ERROR NullInjectorError: R3InjectorError(_AppModule)[InjectionToken CDK_TABLE -> InjectionToken CDK_TABLE]: NullInjectorError: No provider for InjectionToken CDK_TABLE! at NullInjector.get (core.mjs:1654:27) at R3Injector.get (core.mjs:3093:33) at R3Injector.get (core.mjs:3093:33) at ChainedInjector.get (core.mjs:15723:36) at lookupTokenUsingModuleInjector (core.mjs:5730:39) at getOrCreateInjectable (core.mjs:5778:12) at ɵɵdirectiveInject (core.mjs:11050:19) at ɵɵinject (core.mjs:1106:42) at inject (core.mjs:1192:12) at new _HeaderRowOutlet (table.mjs:1528:19)

and i upgrade anguale-cdk to "@angular/cdk": "^17.3.0", and get the same error

[Khalil-IT]

@darrenparkinson

i want to ask if you sloved it or not

[flacohenao]

It seems to be related to some changes introduced in angular/components#28356, you can try to set "@angular/cdk": "<17.1.0" until a fix is provided.

Remember that you also should override the dependency of @nebular/theme, otherwise Nebular will complain:

  "overrides": {
    "@nebular/theme": {
      "@angular/cdk": "<17.1.0"
    }
  }

Hi @jeroenpol.. Sorry for this dumb question, but.. where should I override the nebular/theme dependency? package.json doesn't support this kind of things.. Am I wrong?

[jeroenpol]

It seems to be related to some changes introduced in angular/components#28356, you can try to set "@angular/cdk": "<17.1.0" until a fix is provided.

Remember that you also should override the dependency of @nebular/theme, otherwise Nebular will complain:

  "overrides": {
    "@nebular/theme": {
      "@angular/cdk": "<17.1.0"
    }
  }

Hi @jeroenpol.. Sorry for this dumb question, but.. where should I override the nebular/theme dependency? package.json doesn't support this kind of things.. Am I wrong?

Hi!

package.json does support this. Check https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

[flacohenao]

It seems to be related to some changes introduced in angular/components#28356, you can try to set "@angular/cdk": "<17.1.0" until a fix is provided.

Remember that you also should override the dependency of @nebular/theme, otherwise Nebular will complain:

  "overrides": {
    "@nebular/theme": {
      "@angular/cdk": "<17.1.0"
    }
  }

Hi @jeroenpol.. Sorry for this dumb question, but.. where should I override the nebular/theme dependency? package.json doesn't support this kind of things.. Am I wrong?

Hi!

package.json does support this. Check https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

Thanks @jeroenpol

Even with the override, Tree component still not working :(

[flacohenao]

We still get the error NullInjectorError: NullInjectorError: No provider for InjectionToken CDK_TABLE! after upgrading Nebular to v14, is there already a fix available (otherwise then use the "@angular/cdk": "<17.1.0" fix)?

The override wont work in anycase. I dont know if its just override the cdk or if we need to do anything else.

[OngWiYi]

any update on this?