动态加载vendor.bundle.js状态200，但Chrome网络面板无法加载响应数据

我之前维护老Angular项目时也碰到过一模一样的情况，结合你给出的Angular 2.4、@angular/material 2.0.0-beta.1以及JIT构建的环境信息，咱们可以从这几个方向排查解决：

1. 先检查vendor.bundle.js文件本身的完整性 #

Chrome出现这个提示最常见的原因就是文件损坏或者不完整。你可以：

• 直接去服务器的静态文件目录找到这个文件，打开看看结尾是否有正常的代码闭合（比如有没有突然截断、代码写到一半就结束的情况）；
• 对比本地打包生成的文件和服务器上的文件大小，如果不一致，说明传输过程中出现了文件截断，重新上传完整的文件就能解决。

2. 验证服务器响应头的正确性 #

在Chrome DevTools的Network面板里，点击vendor.bundle.js的请求，查看Response Headers里的Content-Length值，然后和文件实际的字节大小做对比：

• 如果两者不匹配，说明服务器返回的文件长度标识有误，需要调整服务器配置（比如Nginx/Apache的静态文件传输设置），确保Content-Length和真实文件大小一致。

3. 检查动态加载的实现逻辑 #

如果你是通过原生JS动态插入脚本的方式加载vendor.bundle.js，一定要确保加载逻辑正确：

const script = document.createElement('script');
script.src = 'path/to/vendor.bundle.js';
script.onload = () => {
  // 必须等脚本完全加载完成后，再执行依赖vendor的初始化代码
  platformBrowserDynamic().bootstrapModule(AppModule);
};
document.body.appendChild(script);

要是不等脚本加载完就执行Angular初始化，很可能导致脚本还没解析完成就开始运行，进而出现异常。

4. 清除浏览器缓存试试 #

有时候浏览器缓存了损坏的vendor.bundle.js文件，哪怕服务器上的文件已经修复，浏览器还是会读缓存里的错误版本。你可以：

• 按Ctrl+Shift+R强制刷新页面；
• 在Chrome DevTools的Network面板顶部勾选Disable cache，然后重新加载页面，看问题是否消失。

5. 排查打包配置问题 #

因为你用的是JIT构建模式，要确保打包vendor.bundle.js时包含了所有必要的依赖：

• 检查你的打包脚本（比如Webpack配置），确认@angular/core、@angular/material等核心依赖都被正确加入到vendor打包列表中；
• 另外，@angular/material 2.0.0-beta.1需要对应的样式文件支持，记得同步加载material.css或者在vendor打包中包含样式相关的代码。

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