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?