Angular 5生产环境部署至IIS报错：无法读取'moduleType'属性

这个问题我之前帮团队排查过类似场景，本地运行正常但生产构建部署到IIS出错，大概率和构建优化配置、IIS静态资源处理或者路径配置有关，咱们一步步来定位解决：

1. 先排查Angular生产构建的优化参数 #

Angular 5的--prod参数默认会开启一系列优化（比如AOT编译、buildOptimizer、代码压缩等），部分老项目或依赖第三方库时，这些优化可能导致代码引用异常：

• 尝试不带buildOptimizer构建：执行 ng build --prod --no-build-optimizer，把生成的dist重新部署到IIS测试。很多Angular 5项目会因为buildOptimizer的兼容性问题出现这类未定义属性错误。
• 如果上面不行，再尝试关闭AOT编译：执行 ng build --prod --no-aot，AOT编译在处理某些非标准的Angular组件或第三方库时，可能会遗漏依赖引用，导致运行时出错。

2. 检查Base Href配置 #

本地npm start默认是在根路径运行，但如果你的IIS网站不是部署在服务器根目录（比如是虚拟目录，或者域名下的子路径），必须指定正确的base href：

• 比如你的IIS网站访问路径是http://localhost/my-angular-app，构建时要加上参数：ng build --prod --base-href /my-angular-app/
• 也可以直接修改index.html里的<base href="/">为对应路径，但建议通过构建参数统一设置，避免手动修改出错。

3. 确认IIS的静态资源配置 #

IIS默认的MIME类型可能不包含Angular打包后的部分文件类型，导致资源加载失败进而触发代码错误：

• 打开IIS管理器，找到你的网站，点击MIME类型，检查是否包含以下类型：
  • .js：application/javascript
  • .css：text/css
  • .json：application/json
  • .woff：application/font-woff
  • .woff2：application/font-woff2
  • .html：text/html
• 如果缺少，点击添加按钮补充对应的MIME类型，确保所有dist文件夹里的资源都能被IIS正确识别并返回。

4. 检查IIS的文件权限 #

确保IIS的应用池用户对dist文件夹有读取权限：

• 右键dist文件夹，选择属性→安全标签，添加IIS_IUSRS用户，赋予读取和执行、列出文件夹内容、读取权限。
• 如果应用池使用了自定义身份，也要给对应账号配置相同的读取权限。

5. 排查第三方依赖兼容性 #

如果以上步骤都无效，可能是某个第三方库和Angular 5的生产优化不兼容：

• 先临时移除非必要的第三方库，逐步构建部署测试，定位到出问题的库。
• 找到问题库后，尝试升级到兼容Angular 5的版本，或者替换为其他替代库。

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