feat: support angular 19 (#438)

.github/workflows/ci.yaml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: 'yarn'
       - name: Install
         run: yarn

CHANGELOG.md

@@ -1,3 +1,8 @@
+* 2024.12.02: v19.0.0
+  + Feat: Upgrade to angular 19
+  + **BREAKING CHANGES**:
+    + According to [issue #443](https://github.com/xieziyu/ngx-echarts/issues/437), we cannot import from `echarts/index.js` using Angular 19. Therefore, we need to perform a custom build and import everything required from `echarts/core`, `echarts/charts`, `echarts/components`, or other specific entry points.
+    + `provideEcharts` is REMOVED.
 * 2024.05.25: v18.0.0
   + Feat: Upgrade to angular 18
 * 2024.05.16: v17.2.0

README.md

@@ -45,6 +45,7 @@
 
 Latest version @npm:
 
+- `v19.0.0` for Angular 19
 - `v18.0.0` for Angular 18
 - `v17.2.0` for Angular 17
 - `v16.2.0` for Angular 16
@@ -60,8 +61,11 @@ A starter project on Github: https://github.com/xieziyu/ngx-echarts-starter
 
 # Latest Update
 
-* 2024.05.25: v18.0.0
-  + Feat: Upgrade to angular 18
+* 2024.12.02: v19.0.0
+  + Feat: Upgrade to angular 19
+  + **BREAKING CHANGES**:
+    + According to [issue #443](https://github.com/xieziyu/ngx-echarts/issues/437), we cannot import from `echarts/index.js` using Angular 19. Therefore, we need to perform a custom build and import everything required from `echarts/core`, `echarts/charts`, `echarts/components`, or other specific entry points.
+    + `provideEcharts` is REMOVED.
 
 [CHANGELOG.md](./CHANGELOG.md)
 
@@ -101,10 +105,17 @@ Please refer to the [demo](https://xieziyu.github.io/ngx-echarts) page.
 
 ## Standalone
 
-import `NgxEchartsDirective` and `provideEcharts`. Or you can use `provideEchartsCore` to do treeshaking custom build.
+import `NgxEchartsDirective` and `provideEchartsCore`. Or you can use `provideEchartsCore` to do treeshaking custom build.
 
 ```typescript
-import { NgxEchartsDirective, provideEcharts } from 'ngx-echarts';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+// import echarts core
+import * as echarts from 'echarts/core';
+// import necessary echarts components
+import { BarChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([BarChart, GridComponent, CanvasRenderer]);
 
 @Component({
   selector: 'app-root',
@@ -113,7 +124,7 @@ import { NgxEchartsDirective, provideEcharts } from 'ngx-echarts';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   providers: [
-    provideEcharts(),
+    provideEchartsCore({ echarts }),
   ]
 })
 export class AppComponent {}
@@ -125,29 +136,13 @@ import `NgxEchartsModule`:
 
 ```typescript
 import { NgxEchartsModule } from 'ngx-echarts';
-
-@NgModule({
-  imports: [
-    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')
-    }),
-  ],
-})
-export class AppModule {}
-```
-
-The echarts library will be imported **only when it gets called the first time** thanks to the function that uses the native import.
-
-You can also directly pass the echarts instead which will slow down initial rendering because it will load the whole echarts into your main bundle.
-
-```typescript
-import * as echarts from 'echarts';
-import { NgxEchartsModule } from 'ngx-echarts';
+// import echarts core
+import * as echarts from 'echarts/core';
+// import necessary echarts components
+import { BarChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([BarChart, GridComponent, CanvasRenderer]);
 
 @NgModule({
   imports: [
@@ -178,11 +173,11 @@ use `echarts` directive in a div which has **pre-defined height**. (From v2.0, i
 - component:
 
 ```typescript
-import { EChartsOption } from 'echarts';
+import { EChartsCoreOption } from 'echarts/core';
 
 // ...
 
-chartOption: EChartsOption = {
+chartOption: EChartsCoreOption = {
   xAxis: {
     type: 'category',
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -232,7 +227,7 @@ By default, `loadingOpts` is:
 If you need to access parts of the ECharts API such as `echarts.graphic`, please import it from echarts. For example:
 
 ```typescript
-import { graphic } from 'echarts';
+import { graphic } from 'echarts/core';
 
 new graphic.LinearGradient(/* ... */);
 ```
@@ -266,10 +261,11 @@ resizeChart() {
 Import echarts theme files or other extension files after you have imported `echarts` core. For example:
 
 ```typescript
-import * as echarts from 'echarts';
+import * as echarts from 'echarts/core';
 
 /** echarts extensions: */
-import 'echarts-gl';
+import { Bar3DChart } from 'echarts-gl/charts';
+import { Grid3DComponent } from 'echarts-gl/components';
 import 'echarts/theme/macarons.js';
 import 'echarts/dist/extension/bmap.min.js';
 ```

package.json

@@ -25,37 +25,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~18.0.0",
-    "@angular/common": "~18.0.0",
-    "@angular/compiler": "~18.0.0",
-    "@angular/core": "~18.0.0",
-    "@angular/forms": "~18.0.0",
-    "@angular/platform-browser": "~18.0.0",
-    "@angular/platform-browser-dynamic": "~18.0.0",
-    "@angular/router": "~18.0.0",
+    "@angular/animations": "~19.0.1",
+    "@angular/common": "~19.0.1",
+    "@angular/compiler": "~19.0.1",
+    "@angular/core": "~19.0.1",
+    "@angular/forms": "~19.0.1",
+    "@angular/platform-browser": "~19.0.1",
+    "@angular/platform-browser-dynamic": "~19.0.1",
+    "@angular/router": "~19.0.1",
     "@ant-design/icons-angular": "^17.0.0",
-    "echarts": "^5.4.2",
+    "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
     "ng-zorro-antd": "~17.4.0",
     "rxjs": "~7.5.5",
     "tslib": "~2.4.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~18.0.1",
-    "@angular-devkit/core": "~18.0.1",
+    "@angular-devkit/build-angular": "~19.0.2",
+    "@angular-devkit/core": "~19.0.2",
     "@angular-eslint/builder": "^17.0.0",
     "@angular-eslint/eslint-plugin": "^17.0.0",
     "@angular-eslint/eslint-plugin-template": "^17.0.0",
     "@angular-eslint/schematics": "^17.0.0",
     "@angular-eslint/template-parser": "^17.0.0",
-    "@angular/cli": "~18.0.1",
-    "@angular/compiler-cli": "~18.0.0",
-    "@angular/language-service": "~18.0.0",
+    "@angular/cli": "~19.0.2",
+    "@angular/compiler-cli": "~19.0.1",
+    "@angular/language-service": "~19.0.1",
     "@compodoc/compodoc": "^1.1.19",
     "@types/jasmine": "~4.0.3",
     "@types/jasminewd2": "~2.0.10",
-    "@types/node": "^18.0.0",
+    "@types/node": "^20.0.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "codelyzer": "^6.0.2",
@@ -71,7 +71,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.0.1",
     "ngx-markdown": "^17.2.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
@@ -80,6 +80,6 @@
     "protractor": "~7.0.0",
     "raw-loader": "^4.0.2",
     "ts-node": "~10.8.1",
-    "typescript": "~5.4.5"
+    "typescript": "~5.6.3"
   }
 }

projects/ngx-echarts/src/lib/ngx-echarts.directive.ts

@@ -16,7 +16,7 @@ import {
 import { Observable, ReplaySubject, Subject, Subscription, asyncScheduler } from 'rxjs';
 import { switchMap, throttleTime } from 'rxjs/operators';
 import { ChangeFilterV2 } from './change-filter-v2';
-import type { EChartsOption, ECharts, ECElementEvent } from 'echarts';
+import type { EChartsCoreOption, ECharts, ECElementEvent } from 'echarts/core';
 
 export interface NgxEchartsConfig {
   echarts: any | (() => Promise<any>);
@@ -33,7 +33,7 @@ export const NGX_ECHARTS_CONFIG = new InjectionToken<NgxEchartsConfig>('NGX_ECHA
   exportAs: 'echarts',
 })
 export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
-  @Input() options: EChartsOption | null = null;
+  @Input() options: EChartsCoreOption | null = null;
   @Input() theme: string | ThemeOption | null = null;
   @Input() initOpts: {
     devicePixelRatio?: number;
@@ -42,7 +42,7 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterV
     height?: number | string;
     locale?: string;
   } | null = null;
-  @Input() merge: EChartsOption | null = null;
+  @Input() merge: EChartsCoreOption | null = null;
   @Input() autoResize = true;
   @Input() loading = false;
   @Input() loadingType = 'default';

projects/ngx-echarts/src/lib/ngx-echarts.module.ts

@@ -6,16 +6,6 @@ import {
   ThemeOption,
 } from './ngx-echarts.directive';
 
-const provideEcharts = (config: Omit<NgxEchartsConfig, 'echarts'> = {}): Provider => {
-  return {
-    provide: NGX_ECHARTS_CONFIG,
-    useFactory: () => ({
-      ...config,
-      echarts: () => import('echarts'),
-    }),
-  };
-};
-
 const provideEchartsCore = (config: NgxEchartsConfig): Provider => {
   return {
     provide: NGX_ECHARTS_CONFIG,
@@ -41,4 +31,4 @@ export class NgxEchartsModule {
   }
 }
 
-export { NgxEchartsDirective, NGX_ECHARTS_CONFIG, ThemeOption, provideEcharts, provideEchartsCore };
+export { NgxEchartsDirective, NGX_ECHARTS_CONFIG, ThemeOption, provideEchartsCore };

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: false,
 })
 export class AppComponent {
   isCollapsed = false;

src/app/app.module.ts

@@ -7,19 +7,66 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { registerLocaleData, LocationStrategy, HashLocationStrategy } from '@angular/common';
 import en from '@angular/common/locales/en';
 import { NgZorroCustomModule } from './shared/ng-zorro-custom.module';
-import { NgxEchartsDirective, provideEcharts } from 'ngx-echarts';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+
+import * as echarts from 'echarts/core';
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  GraphicComponent,
+  CalendarComponent,
+} from 'echarts/components';
+import { BarChart, LineChart, HeatmapChart, PieChart, GraphChart, TreeChart } from 'echarts/charts';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
 
 // Import echarts extensions
-import 'echarts-gl';
+import { Bar3DChart } from 'echarts-gl/charts';
+import { Grid3DComponent } from 'echarts-gl/components';
 // Import echarts themes
 import 'echarts/theme/macarons.js';
 
 registerLocaleData(en);
 
+// Register the required components
+echarts.use([
+  // charts ...
+  BarChart,
+  LineChart,
+  HeatmapChart,
+  PieChart,
+  GraphChart,
+  TreeChart,
+  Bar3DChart,
+  // components ...
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  GraphicComponent,
+  CalendarComponent,
+  Grid3DComponent,
+  // features ...
+  LabelLayout,
+  UniversalTransition,
+  // renderers ...
+  CanvasRenderer,
+]);
+
 @NgModule({
   declarations: [AppComponent],
   bootstrap: [AppComponent],
@@ -38,7 +85,7 @@ registerLocaleData(en);
       provide: LocationStrategy,
       useClass: HashLocationStrategy,
     },
-    provideEcharts(),
+    provideEchartsCore({ echarts }),
     provideHttpClient(withInterceptorsFromDi()),
   ],
 })

src/app/layout/app-menu/app-menu.component.ts

@@ -11,6 +11,7 @@ interface AppMenuEx extends AppMenu {
   selector: 'app-menu',
   templateUrl: './app-menu.component.html',
   styleUrls: ['./app-menu.component.scss'],
+  standalone: false,
 })
 export class AppMenuComponent {
   @Input() isCollapsed: boolean;

src/app/pages/demo-advanced/advanced/advanced.component.ts

@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-advanced',
   templateUrl: './advanced.component.html',
   styleUrls: ['./advanced.component.scss'],
+  standalone: false,
 })
 export class AdvancedComponent {
   constructor() {}

src/app/pages/demo-advanced/advanced/connect-charts/connect-charts.component.ts

@@ -1,6 +1,6 @@
 import { Component, AfterViewInit } from '@angular/core';
-import type { EChartsOption } from 'echarts';
-import { getInstanceByDom, connect } from 'echarts';
+import type { EChartsCoreOption } from 'echarts/core';
+import { getInstanceByDom, connect } from 'echarts/core';
 // IGNORE START
 import html from './connect-charts.component.html';
 import component from './connect-charts.component.txt';
@@ -10,13 +10,14 @@ import component from './connect-charts.component.txt';
   selector: 'app-connect-charts',
   templateUrl: './connect-charts.component.html',
   styleUrls: ['./connect-charts.component.scss'],
+  standalone: false,
 })
 export class ConnectChartsComponent implements AfterViewInit {
   // IGNORE START
   html = html;
   component = component;
   // IGNORE END
-  options: EChartsOption = {
+  options: EChartsCoreOption = {
     color: ['#3398DB'],
     tooltip: {
       trigger: 'axis',