SystemJS加载IIS托管Angular13应用main.js不执行无报错问题咨询

DevOps 小满

2026-8-29

问题根因

故障核心是SystemJS 0.19.x 旧版加载逻辑、配套的angular加载器，和Angular 13+的ESM分发格式、CommonJS模块编译输出不兼容，和你观察到的现象完全对应：

你配置中给Scripts目录下所有.js文件都绑定了旧版systemjs-angular-loader.js，这个加载器是为Angular 12及更早版本设计的，遇到文件内的CommonJS require语法时，会在执行任何模块代码前静态扫描所有require调用，预加载所有依赖。只要预加载过程中任意一个依赖出现解析失败、路径错误、格式不匹配的问题，且错误被加载器静默吞掉，整个模块的执行就会直接中断，连最开头的alert都不会触发。
旧版SystemJS 0.19.x的错误回调只覆盖模块执行阶段的报错，预加载依赖阶段的异常不会触发你写的console.error回调，所以控制台没有任何错误输出。
你全局开启的Babel转译没有配置目标格式，会把Angular 13+原生的ESM模块错误转成CommonJS格式，进一步加剧模块格式的混乱，让依赖解析更容易静默失败。
TypeScript默认编译输出的是CommonJS格式，依赖require、exports等CommonJS全局变量，SystemJS没有自动注入这些变量的话，就算依赖加载完成，执行时也会触发未定义错误，只是同样被前面的加载逻辑吞掉了。

修复步骤

按顺序调整配置即可解决：

修改TypeScript编译输出格式
打开项目的tsconfig.json，将应用代码对应的编译规则里的module字段从commonjs改为system，这样TS编译出来的代码会是SystemJS原生支持的System.register格式，不会再生成require、exports调用，从根源避免CommonJS兼容问题。重新编译后生成的main.js会把所有依赖声明在System.register的依赖数组中，不会再出现顶层require。
如果项目中有遗留的第三方CommonJS规范JS文件，不需要全局修改TS配置，只针对Angular应用的源码目录设置module为system即可。
清理无效的加载器配置
旧版systemjs-angular-loader.js完全不兼容Angular 13+的模块格式，直接删掉packages.Scripts.meta里给所有.js/.mjs绑定该loader的规则，只保留loader自身的豁免配置，修改后的Scripts配置参考：
```
Scripts: {
    defaultExtension: 'js',
    meta: {
        'systemjs-angular-loader.js': {
            loader: false
        },
        '*.js': {
            format: 'system'
        }
    }
}
```
关闭全局Babel转译
Angular 13+分发的.mjs文件本身就是兼容主流浏览器的ES2015代码，不需要Babel额外转译。全局转译只会拖慢加载速度，还会破坏ESM模块的结构，直接删掉配置里的transpiler: 'Babel'、babelOptions以及对应的Babel模块映射即可。
显式声明各模块包的格式
给所有使用.mjs格式的包（Angular核心包、Material包、你自己的app源码包）显式声明模块格式为esm，避免SystemJS按错误的格式解析文件。以Angular核心包配置为例：
```
angular: {
    defaultExtension: 'mjs',
    meta: {
        '*.mjs': {
            format: 'esm'
        }
    }
}
```
angularmat、app、rxjs包都按同样规则添加format: 'esm'声明，其中rxjs注意确认映射路径下的入口文件正确，7.x版本rxjs的ESM入口为dist/esm/index.js。

补全错误捕获逻辑
修改页面中的启动代码，添加全局未捕获Promise异常监听，避免后续出现模块加载错误时被静默吞掉：

<script>
    window.addEventListener('unhandledrejection', e => console.error('模块加载异常:', e.reason));
    System.import("Scripts/main.js").catch(console.error.bind(console));
</script>

补充说明

如果按上述步骤修改后还有个别依赖解析异常，可以把SystemJS升级到0.21.x的最终稳定版，这个版本对ESM、CommonJS混合加载的兼容性比0.19.x完善很多，且配置基本兼容，不需要大规模改动现有映射规则。
改完后清空浏览器缓存刷新，首先应该能看到你添加的alert正常弹出，后续如果有具体依赖的路径错误，控制台会直接打印明确的报错信息，按提示调整map映射即可。

内容的提问来源于stack exchange，提问作者Ernie Molenaar