Блог

Главная - Вопросы по программированию - Highcharts-Angular не работает с Angular Universal

Highcharts-Angular не работает с Angular Universal

#javascript #node.js #angular #highcharts

#javascript #node.js #angular #highcharts

Вопрос:

Из того, что я прочитал до сих пор, при добавлении SSR может возникнуть много ошибок. В моем случае свойство Core/Utilities.js не может быть прочитано как undefined 

 /home/user/Dokumente/microservices/frontend/dist/frontend/server/main.js:61297
                __WEBPACK_AMD_DEFINE_RESULT__ !== undefined amp;amp; (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

Я добавил Universal в свое существующее приложение Angular с помощью следующей команды

 ng add @nguniversal/express-engine

И попытался запустить его с

 npm run dev:ssr

Я ничего не мог найти о том, что такое отсутствующий Core/utilities.js модуль. Я попытался установить Node-Core-Utils npm install -g node-core-utils , но это не помогло. Поскольку я не занимаюсь большим количеством материалов, связанных с javascript, я очень плохо знаком с NPM.

Комментарии:

1. Привет, пожалуйста, переместите свое редактирование в ответ и отметьте его как решение, теперь, когда вопрос открыт.

Ответ №1:

Проблема связана с оболочкой highcharts-angular https://github.com/highcharts/highcharts-angular/issues/216 .

Я постараюсь исправить это с уровня оболочки в предстоящем выпуске

Обходной путь

Запретить отображение Highcharts во время работы на стороне сервера

 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>

(У меня не сработало, но также помешало загрузке модулей на стороне сервера)

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