Open borisdaev opened 5 months ago
HI @borisdaev!
From Angular 17 SSR behaves differently than it used to with Angular Universal
.
I've used the isBrowser
flag instead of the isHighcharts
, besides that it is business as usual.
Please see a standalone SSR component in the demo.
Internal note: Let's improve the documentation and describe SSR in Angular 17.
Thank you for the demo code.
code
line-chart.component.ts
import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { HighchartsChartModule } from 'highcharts-angular'; // import * as Highcharts from 'highcharts/highstock'; import Highcharts from 'highcharts'; import HC_Stock from 'highcharts/modules/stock'; HC_Stock(Highcharts);
@Component({ selector: "app-line-chart", standalone:true, templateUrl: "./line-chart.component.html", styleUrls: ["./line-chart.component.scss"], imports:[CommonModule, HighchartsChartModule] }) export class LineChartComponent{ Highcharts: typeof Highcharts = Highcharts;
isHighcharts = typeof Highcharts === 'object';
chartOptions: Highcharts.Options = { series: [ { type: 'line', pointInterval: 24 3600 1000, data: [1, 2, 3, 4, 5], }, ], }; }
line-chart.component.html
<highcharts-chart *ngIf="isHighcharts" [Highcharts]="Highcharts" [constructorType]="'stockChart'" [options]="chartOptions"
I am facing this issue
ERROR TypeError: Cannot read properties of undefined (reading 'Core/Globals.js') at HC_Stock (c:/Users/User/source/project/frontend/node_modules/highcharts/modules/stock.js:9:539)
at eval (c:/Users/User/source/project/frontend/projects/projects-landing-page/src/app/components/line-chart/line-chart.component.ts:7:1) at async instantiateModule (file:///C:/Users/User/source/project/frontend/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)
, can you please provide an example code that implements SSR in Angular version 17 using standalone components or how can i fix this ?
node : v20.11.0 angular:17.1 npm 10.4.0