Angular构建报错：Reference to a local (non-exported) symbol 'require' 求助

我刚看完你的问题和代码，这个错误是Angular的AOT（提前编译）编译器导致的——它在静态解析代码时，无法识别你在@NgModule的imports里直接使用的未导出require符号。具体来说就是ChartModule.forRoot(require('highcharts/highstock'))这一行，因为你只在文件里声明了require但没把它（或者它的引用结果）导出，AOT没法静态解析这个调用。

下面是具体的修复步骤：

修复方案 #

修改你的app.module.ts，把highstock的引用赋值给一个导出的变量，然后在ChartModule.forRoot()里使用这个变量，而不是直接写require：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ChartModule } from 'angular2-highcharts/index';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

// 保持require的声明
declare var require: any;

// 把highstock的引用赋值给导出的变量，让AOT能静态解析到
export const highstockInstance = require('highcharts/highstock');

export function highchartsFactory() {
  const hc = require('highcharts');
  const dd = require('highcharts/modules/drilldown');
  dd(hc);
  return hc;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    // 这里使用导出的变量代替直接的require调用
    ChartModule.forRoot(highstockInstance),
  ],
  providers: [
    { provide: HighchartsStatic, useFactory: highchartsFactory }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么这样能解决问题？ #

Angular的AOT编译器在构建阶段会提前分析所有代码，它要求装饰器（比如@NgModule）里的所有值都必须是静态可解析的——也就是说，它需要在编译时就能确定这些值的来源。你之前直接在forRoot()里写require('highcharts/highstock')，这个require是你在文件里局部声明的未导出符号，AOT无法追踪到它的定义，所以抛出了错误。通过把require的结果赋值给一个导出的变量，AOT就能静态识别这个变量的存在，从而顺利完成解析。

另外，你也可以尝试另一种方式：如果你的项目使用的是较新的Angular版本，考虑改用ES6的import语法来引入Highcharts（如果库支持的话），不过对于angular2-highcharts来说，上面的方案应该是最直接有效的。

现在你可以重新运行ng build试试，应该能解决这个错误了。

内容的提问来源于stack exchange，提问作者Tania Tanzin Hoque