Angular5 Universal生产环境报错webpackJsonp is not defined求解决方案

嘿，这个问题我在帮开发者排查Angular Universal项目时碰到过好多次了，webpackJsonp未定义的坑大多是生产环境构建配置或者资源加载顺序出了问题，给你几个针对性的解决方案，按步骤排查应该能搞定：

1. 核对服务端与客户端的webpack配置差异 #

Angular Universal需要两套独立的构建配置（服务端server、客户端browser），重点检查这几点：

• 服务端配置里绝对不能启用CommonsChunkPlugin，这个插件是给客户端拆分公共代码用的，服务端渲染不需要拆分chunk，加了它很容易引发运行时冲突。
• 客户端的CommonsChunkPlugin要确保配置了name: 'inline'这个chunk，它包含webpack的核心运行时代码，必须优先加载。
• 确认服务端配置的output.libraryTarget是commonjs2，客户端用默认值即可，别把两者的配置搞混。

2. 验证index.html的资源加载顺序 #

生产环境的index.html一般由构建工具自动生成，要保证：

• inline.bundle.js（或对应名称的运行时chunk）是第一个被引入的脚本——webpackJsonp的定义就在这里，必须在vendor.bundle.js和main.bundle.js之前加载。
• 别手动修改生成的脚本顺序，尽量让构建工具自动注入。如果是手动维护index.html，严格按照inline -> vendor -> main的顺序引入。

3. 检查服务端渲染的模板注入逻辑 #

在Universal的服务端入口文件（比如server.ts）里，确保你用ngExpressEngine正确渲染模板，不要手动引入客户端的bundle脚本：
服务端只负责渲染HTML结构，客户端脚本应该由构建后的index.html自动引入，避免服务端和客户端的webpack运行时互相干扰。参考示例代码：

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// 所有路由都通过Angular Universal渲染
app.get('*', (req, res) => {
  res.render('index', { req });
});

4. 清理缓存后重新构建 #

旧的构建缓存可能导致资源不匹配，执行以下命令彻底清理后重新构建：

rm -rf node_modules/.cache
rm -rf dist
ng build --prod
ng build --prod --app server --output-hashing=false

（注：Angular 5的CLI命令可能根据你的项目配置略有调整，按需修改）

5. 排查第三方库的冲突 #

有些第三方库在服务端渲染时可能没正确适配webpack运行时，你可以先暂时移除最近添加的依赖，看看错误是否消失。如果确定是某个库的问题，可以在服务端webpack配置中用externals排除它，让客户端单独加载：

externals: [
  (context, request, callback) => {
    const isExternal =
      request.match(/^[@a-z][a-z/.\-0-9]*$/i) &&
      !request.match(/^./|^../);
    callback(null, isExternal ? `commonjs ${request}` : false);
  }
]

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