Angular 2集成Highstock报错：require is not a function 求助

我之前也碰到过这个问题，本质是Highstock默认的模块加载方式（依赖CommonJS的require）和Angular的ES模块环境不兼容导致的。下面给你几个可靠的解决方案，按推荐程度排序：

方案一：使用官方Highcharts Angular包装器（最推荐） #

官方提供的highcharts-angular组件已经处理了模块兼容问题，完全不需要手动处理require：

1. 安装依赖
   在项目根目录执行命令：

   npm install highcharts highcharts-angular --save
   

2. 配置Angular模块
   在你的app.module.ts中导入并注册HighchartsChartModule：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HighchartsChartModule } from 'highcharts-angular'; // 导入模块
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, HighchartsChartModule], // 添加到imports数组
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 在组件中使用Highstock
   在组件文件中导入Highstock，并定义图表配置：

   import { Component } from '@angular/core';
   import * as Highcharts from 'highcharts/highstock'; // ES模块方式导入
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent {
     // 定义Highstock图表配置
     highstockOptions: Highcharts.Options = {
       title: {
         text: 'Sample Stock Price Chart'
       },
       xAxis: {
         type: 'datetime'
       },
       series: [{
         name: 'Apple Stock',
         data: [
           [1620000000000, 120],
           [1620864000000, 125],
           [1621728000000, 130]
           // 可添加更多数据点
         ]
       }]
     };
   }
   

4. 模板中渲染图表
   在组件的HTML模板中使用官方组件：

   <highcharts-chart
     [Highcharts]="Highcharts"
     [options]="highstockOptions"
     style="width: 100%; height: 500px; display: block;"
   ></highcharts-chart>
   

方案二：手动配置UMD脚本（无包装器方式） #

如果你不想用官方包装器，可以直接引入Highstock的UMD版本，避免require调用：

1. 安装Highstock

   npm install highcharts --save
   

2. 在angular.json中添加脚本
   打开angular.json，找到architect > build > options > scripts，添加Highstock的UMD文件路径：

   "scripts": [
     "node_modules/highcharts/highstock.js"
   ]
   

3. 在组件中声明Highcharts变量
   因为是全局引入，需要在组件中声明类型：

   import { Component } from '@angular/core';
   
   declare var Highcharts: any; // 声明全局变量
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent {
     ngOnInit() {
       // 初始化图表
       Highcharts.stockChart('chart-container', {
         title: { text: 'Sample Stock Chart' },
         series: [{ data: [/* 你的数据 */] }]
       });
     }
   }
   

4. 模板中添加容器

   <div id="chart-container" style="width: 100%; height: 500px;"></div>
   

为什么会出现"require is not a function"？ #

Angular的构建工具（Webpack）默认针对浏览器环境，而浏览器本身不支持CommonJS的require函数。如果直接引入Highstock的CommonJS版本，或者手动调用require，就会触发这个错误。官方包装器通过ES模块导入的方式解决了这个兼容问题，是最稳妥的选择。

内容的提问来源于stack exchange，提问作者Ashish Bisht