Angular 8插件集成报错：Uncaught ReferenceError: SystemJS未定义

问题分析 #

你遇到的Uncaught ReferenceError: SystemJS is not defined错误，本质是SystemJS在Angular入口文件main.ts执行前还未被加载或全局暴露。从你的配置来看，虽然在angular.json里引入了SystemJS，但加载顺序不合理，导致main.ts执行时SystemJS还未准备就绪。

修复步骤 #

1. 确保SystemJS正确安装并调整加载顺序 #

首先确认已安装SystemJS：

npm install systemjs --save

然后修改angular.json的scripts数组，把SystemJS的引入放在最前面——Webpack会按数组顺序加载脚本，这样SystemJS会在Angular的main.ts执行前完成加载：

"scripts": [
  "node_modules/systemjs/dist/system.js",
  "node_modules/jquery/dist/jquery.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

2. 配置TypeScript识别全局SystemJS变量 #

在tsconfig.json的compilerOptions中添加allowUmdGlobalAccess，让TypeScript能正确识别全局的SystemJS对象：

"compilerOptions": {
  // 其他已有配置...
  "allowUmdGlobalAccess": true
}

3. 重启开发服务器 #

修改angular.json和tsconfig.json后，必须重启Angular开发服务器才能让配置生效：

ng serve --open

4. 验证加载状态 #

可以在index.html中添加一段测试脚本，确认SystemJS已被正确加载：

<body>
  <app-root></app-root>
  <script>
    console.log("SystemJS loaded:", typeof SystemJS);
  </script>
</body>

打开浏览器控制台，如果输出SystemJS loaded: object，说明加载正常。

替代方案：使用模块联邦（Module Federation）实现插件架构 #

SystemJS在Angular 8+场景下已不是最推荐的插件/微前端方案。Webpack 5推出的模块联邦是更现代、高效的选择，它允许主应用动态加载远程插件模块，无需依赖SystemJS。

你可以借助@angular-architects/module-federation库简化配置，核心步骤如下：

• 安装依赖：npm install @angular-architects/module-federation --save-dev
• 初始化模块联邦配置：ng add @angular-architects/module-federation
• 在插件项目的webpack.config.js中配置，暴露需要被加载的组件/模块
• 在主应用中通过loadRemoteModule方法动态加载插件

这种方案更贴合Angular生态的发展趋势，也能避免SystemJS带来的全局变量依赖问题。

内容的提问来源于stack exchange，提问作者Nassim El gazzah