Angular 7升级至14后使用SystemJS加载插件模块报reduce未定义错误

问题原因分析 #

报错TypeError: Cannot read properties of undefined (reading 'reduce')本质是compileModuleAndAllComponentsAsync接收到了undefined的模块参数，大概率是以下原因：

• SystemJS导入后的模块结构在Angular 14中发生变化，无法通过module[moduleName]获取到目标NgModule类
• Angular 14对JIT编译的配置要求更严格，未正确启用JIT环境
• 插件模块的导出格式与Angular 7时期不同

具体解决方案 #

1. 调试并修正模块获取逻辑 #

先打印导入的模块结构，确认目标NgModule的实际位置：

return SystemJS.import(url).then((module) => {
    console.log('导入的模块结构:', module); // 查看控制台输出的模块结构
    // 尝试从模块的命名导出或默认导出中获取目标NgModule
    const targetModule = module[moduleInfo.moduleName] || module.default;
    if (!targetModule) {
        throw new Error(`未找到名为${moduleInfo.moduleName}的模块`);
    }
    return this.compiler.compileModuleAndAllComponentsAsync(targetModule);
});

通常Angular 14打包的模块会使用默认导出，此时直接取module.default即可。

2. 确保JIT编译环境配置正确 #

Angular 9+默认启用AOT编译，使用Compiler进行动态模块编译需要手动导入CompilerModule：

// app.module.ts
import { NgModule } from '@angular/core';
import { CompilerModule } from '@angular/compiler';

@NgModule({
    imports: [
        // 其他导入模块
        CompilerModule
    ]
})
export class AppModule {}

同时确保@angular/compiler已安装在项目依赖中：

npm install @angular/compiler

3. 升级SystemJS至兼容版本 #

Angular 14对依赖库的版本要求更高，将SystemJS升级到最新稳定版（如v6.x）：

npm install systemjs@latest

4. 替换SystemJS为原生ES动态导入（推荐） #

Angular 14支持原生ES模块动态导入，无需依赖SystemJS，兼容性更好：

return import(url).then((module) => {
    const targetModule = module[moduleInfo.moduleName] || module.default;
    return this.compiler.compileModuleAndAllComponentsAsync(targetModule);
});

注意使用这种方式需要确保插件模块是以ES模块格式打包的。

内容的提问来源于stack exchange，提问作者Umapathi Chowdary