Highcharts-Angular not working with Angular Universal

user_13089557 0
Viewed 176

From what I have read so far, there are many errors that can occur when adding SSR. In my case, the property Core/Utilities.js can't be read as undefined

/home/user/Dokumente/microservices/frontend/dist/frontend/server/main.js:61297
                __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)):undefined})(function(a){function e(a,g,q,f){a.hasOwnProperty(g)||(a[g]=f.apply(null,q))}a=a?a._modules:{};e(a,"Mixins/IndicatorRequired.js",[a["Core/Utilities.js"]],function(a){var g=a.error;return{isParentLoaded:function(a,
                                                                                                                                                                                                                                                               ^

TypeError: Cannot read property 'Core/Utilities.js' of undefined

I have added Universal to my existing Angular application via the following command

ng add @nguniversal/express-engine

And tried to run it with

npm run dev:ssr

I couldn't find anything about what the missing Core/utilities.js module is. I tried installing Node-Core-Utils npm install -g node-core-utils, but didn't help. Since I don't do much javascript related stuff I'm very unfamiliar with NPM.

angular highcharts node.js javascript
1 Answers

The problem is related to the highcharts-angular wrapper https://github.com/highcharts/highcharts-angular/issues/216.

I will try to fix that from the wrapper level in the upcoming release

Workaround

Prevent Highcharts from rendering while running on the server-side

export class AppComponent implements OnInit {
  isHighcharts = typeof Highcharts === 'object'; // new
  title = 'UnivHighCharts';
  Highcharts: typeof Highcharts = Highcharts;
  chartConstructor: string = 'chart';
  chartOptions: Highcharts.Options = {};

  ngOnInit() {
    this.chartOptions = {
      series: [{
        data: [1, 2, 3],
        type: 'line'
      }]
    };
  }
}

<highcharts-chart
  *ngIf="isHighcharts"
  [Highcharts]="Highcharts"
  [constructorType]="chartConstructor"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

(Didn't work for me but also preventing the modules to load on the server-side did)

if (typeof Highcharts === 'object') {
    HC_More(Highcharts)
}
user_130895570
Related