I installed ngx echarts in an Angular 14 project but I get this error Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments - echarts

Question

After doing the install using
npm install echarts -S
npm install ngx-echarts -S
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatSelectModule } from '#angular/material';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { PageHeaderComponent } from './components/page-header/page-header.component';
import { ChubbTableComponent } from './components/chubb-table/chubb-table.component';
import { StatusChipComponent } from './components/status-chip/status-chip.component';
import { NgxEchartsModule } from 'ngx-echarts';
#NgModule({
declarations: [
AppComponent,
DashboardComponent,
PageHeaderComponent,
ChubbTableComponent,
StatusChipComponent,
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
AppRoutingModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatIconModule,
MatMenuModule,
NgxEchartsModule.forRoot({
/**
* This will import all modules from echarts.
* If you only need custom modules,
* please refer to [Custom Build] section.
*/
echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
})
],
exports: [
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
this is what my app.module.ts looks like. But I get this error below when serving.
{
"name": "modular-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.2.12",
"#angular/cdk": "^7.3.7",
"#angular/common": "^14.0.0",
"#angular/compiler": "^14.0.0",
"#angular/core": "^14.0.0",
"#angular/forms": "^14.0.0",
"#angular/material": "^7.3.7",
"#angular/platform-browser": "^14.0.0",
"#angular/platform-browser-dynamic": "^14.0.0",
"#angular/router": "^14.0.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"clone-deep": "^4.0.1",
"echarts": "^5.4.1",
"material-components-web": "^14.0.0",
"ngx-echarts": "^15.0.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.4",
"#angular/cli": "~14.0.4",
"#angular/compiler-cli": "^14.0.0",
"#types/jasmine": "~4.0.0",
"jasmine-core": "~4.1.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.7.2"
}
}
this is my package.json
Error: node_modules/ngx-echarts/lib/ngx-echarts.directive.d.ts:90:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.
90 static ɵdir: i0.ɵɵDirectiveDeclaration<NgxEchartsDirective, "echarts, [echarts]", ["echarts"], { "options": "options"; "theme": "theme"; "initOpts": "initOpts"; "merge": "merge"; "autoResize": "autoResize"; "loading": "loading"; "loadingType": "loadingType"; "loadingOpts": "loadingOpts"; }, { "chartInit": "chartInit"; "optionsError": "optionsError"; "chartClick": "chartClick"; "chartDblClick": "chartDblClick"; "chartMouseDown": "chartMouseDown"; "chartMouseMove": "chartMouseMove"; "chartMouseUp": "chartMouseUp"; "chartMouseOver": "chartMouseOver"; "chartMouseOut": "chartMouseOut"; "chartGlobalOut": "chartGlobalOut"; "chartContextMenu": "chartContextMenu"; "chartLegendSelectChanged": "chartLegendSelectChanged"; "chartLegendSelected": "chartLegendSelected"; "chartLegendUnselected": "chartLegendUnselected"; "chartLegendScroll": "chartLegendScroll"; "chartDataZoom": "chartDataZoom"; "chartDataRangeSelected": "chartDataRangeSelected"; "chartTimelineChanged": "chartTimelineChanged"; "chartTimelinePlayChanged": "chartTimelinePlayChanged"; "chartRestore": "chartRestore"; "chartDataViewChanged": "chartDataViewChanged"; "chartMagicTypeChanged": "chartMagicTypeChanged"; "chartPieSelectChanged": "chartPieSelectChanged"; "chartPieSelected": "chartPieSelected"; "chartPieUnselected": "chartPieUnselected"; "chartMapSelectChanged": "chartMapSelectChanged"; "chartMapSelected": "chartMapSelected"; "chartMapUnselected": "chartMapUnselected"; "chartAxisAreaSelected": "chartAxisAreaSelected"; "chartFocusNodeAdjacency": "chartFocusNodeAdjacency"; "chartUnfocusNodeAdjacency": "chartUnfocusNodeAdjacency"; "chartBrush": "chartBrush"; "chartBrushEnd": "chartBrushEnd"; "chartBrushSelected": "chartBrushSelected"; "chartRendered": "chartRendered"; "chartFinished": "chartFinished"; }, never, never, false, never>;
not sure what is wrong as I only followed the simple instructions