Having problem with echarts in an Angular using ThemeSubscriptions

Question

i get the following error message:

ERROR TypeError: echarts is undefined
dThemeSubscription knowledge-dashboard.component.ts:132
RxJS 20
setDChart knowledge-dashboard.component.ts:126
ngOnInit knowledge-dashboard.component.ts:36
Angular 22
RxJS 16
getCnt webservice.service.ts:135
ZoneAwarePromise Angular
getCnt webservice.service.ts:134
ngOnInit knowledge-dashboard.component.ts:27
Angular 19
RxJS 5
Angular 8

In another Angular project everything works fine but i cannot find the error. Here is the HTML code to this specific instance

nb-card size="small">
        <nb-card-header>
                Knowledge Base
        </nb-card-header>
              <nb-card-body>
                <div style="width: 95%; height: 100%;" echarts [options]="dOptions" class="echart"></div>
              </nb-card-body>
            </nb-card>

And the TS file:

setDChart(){
    this.dThemeSubscription = this.theme.getJsTheme().subscribe(config => {
      const colors: any = config.variables;
    const echarts: any = config.variables.echarts;
    this.dOptions = {
      legend: {
        textStyle: {
          color: echarts.textColor,
        },
        orient: 'vertical',
        left: 'left'
      },
      backgroundColor: echarts.bg,
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          saveAsImage: { show: true }
        }
      },

      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: this.cnts[0].darshan_cnt, name: 'Darshan' },
            { value: this.cnts[1].io500_cnt, name: 'IO500' },
            { value: this.cnts[2].ior_cnt, name: 'IOR' },
            { value: this.cnts[3].haccio_cnt, name: 'HACCIO' },
            { value: this.cnts[4].custom_cnt, name: 'Others' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
  });

And finally the package and config files:

{
  "name": "knowex2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0-next.0",
    "@angular/cdk": "^14.0.0",
    "@angular/common": "^14.0.0-next.0",
    "@angular/compiler": "^14.0.0-next.0",
    "@angular/core": "^14.0.0-next.0",
    "@angular/forms": "^14.0.0-next.0",
    "@angular/localize": "^14.0.0-next.0",
    "@angular/platform-browser": "^14.0.0-next.0",
    "@angular/platform-browser-dynamic": "^14.0.0-next.0",
    "@angular/router": "^14.0.0-next.0",
    "@nebular/eva-icons": "10.0.0",
    "@nebular/theme": "^10.0.0",
    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "echarts": "^4.9.0",
    "eva-icons": "^1.1.2",
    "ngx-echarts": "^14.0.0",
    "rxjs": "^6.6.2",
    "rxjs-compat": "^6.3.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.0",
    "@angular/cli": "~14.2.0",
    "@angular/compiler-cli": "^14.0.0-next.0",
    "@schematics/angular": "~14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

Config File:

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "target": "ES2022",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "plugins": [
      {
        "name": "tslint-language-service"
      }
    ],
    "useDefineForClassFields": false
  }
}

I have another project where everything works just fine but i needed to set up a new project and now this error occurs. I already tried setting up a new project and tried everything from the beginning.

The dependecies should be nearly the same execpt for ngx-echarts which has version 14.0.0 in this project but in the other ist has version 4.9.2

Changing this results in more errors.