Angular AOT编译报错：装饰器不支持函数调用的解决方法及原因

问题场景回顾 #

你在测试Highcharts Angular2x Wrapper时，用Angular CLI 1.6.1执行ng serve（JIT模式）一切正常，但切换到AOT模式（ng serve --aot）时出现了编译错误：

ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'ChartModule' was called

下面我会分两部分解决你的问题：

1. 解决编译错误的可行方案 #

方案一：直接导入Highcharts模块（最简便） #

把原来的工厂函数替换成直接导入Highcharts对象，这样就能满足AOT对静态参数的要求。修改你的AppModule.ts如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';
// 直接导入Highcharts
import * as Highcharts from 'highcharts';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 直接传入已导入的Highcharts对象，不再调用工厂函数
    ChartModule.forRoot(Highcharts)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这个方案直接避开了装饰器内的函数调用问题，是最直接有效的解决方式。

方案二：用APP_INITIALIZER动态加载（适合按需加载场景） #

如果你的项目需要动态加载Highcharts（比如仅在特定模块中使用），可以借助Angular的APP_INITIALIZER在应用初始化阶段提前加载好Highcharts，再注入使用：

第一步：创建Highcharts加载服务

import { Injectable } from '@angular/core';

declare var require: any;

@Injectable()
export class HighchartsLoaderService {
  highchartsInstance: any;

  // 封装加载逻辑，返回Promise确保初始化完成
  loadHighcharts(): Promise<any> {
    return new Promise((resolve) => {
      this.highchartsInstance = require('highcharts');
      resolve(this.highchartsInstance);
    });
  }
}

第二步：修改AppModule配置

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';
import { AppComponent } from './app.component';
import { HighchartsLoaderService } from './highcharts-loader.service';

// 初始化函数，调用服务的加载方法
export function initHighcharts(loader: HighchartsLoaderService) {
  return () => loader.loadHighcharts();
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 此处不再调用forRoot，后续通过服务获取实例
    ChartModule
  ],
  providers: [
    HighchartsLoaderService,
    {
      provide: APP_INITIALIZER,
      useFactory: initHighcharts,
      deps: [HighchartsLoaderService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

之后你就可以在组件中注入HighchartsLoaderService，通过highchartsInstance属性使用Highcharts了。

2. 错误出现的原因解析 #

要理解这个错误，得先搞清楚Angular JIT和AOT编译的核心差异：

• JIT编译：在浏览器运行时进行编译，允许在装饰器（比如@NgModule）中调用函数，因为运行时可以实时执行函数并获取结果。
• AOT编译：在项目构建阶段（服务器端）完成编译，Angular的编译器ngc需要静态分析所有装饰器的参数——它要提前生成模块工厂代码，这些代码必须是静态可预测的，不能依赖运行时才能执行的逻辑。

你原来的代码中，ChartModule.forRoot(getHighchartsModule)是在@NgModule的imports数组里调用了一个函数，而且这个函数内部还使用了require（运行时模块加载函数）。ngc在静态分析时无法预知这个函数调用的返回值，也就无法生成正确的模块工厂代码，因此抛出了Function calls are not supported in decorators的错误。

总结来说：AOT要求装饰器的参数必须是静态可解析的常量，不能是动态函数调用的结果。

内容的提问来源于stack exchange，提问作者Anis Tissaoui