Webpack打包AngularJS混合应用报Oidc.UserManager不是构造函数错误

看起来你的问题核心在于Webpack打包时没有正确处理oidc-client的全局变量暴露，导致AngularJS服务无法访问到预期的Oidc.UserManager构造函数。下面是具体的分析和解决方案：

问题根源 #

你当前用webpack.ProvidePlugin直接指向本地的oidc-client.js文件，但Webpack会把这个文件当作模块解析，而非直接暴露全局的Oidc对象。oidc-client的UMD格式文件在浏览器环境中原本会自动挂载到window.Oidc，但Webpack的模块封装机制破坏了这一点，导致你的AngularJS服务拿到的Oidc并非包含UserManager的正确对象。

解决方案一：改用npm安装oidc-client（推荐） #

用npm管理依赖能让Webpack更顺畅地处理模块导出，步骤如下：

1. 安装指定版本的oidc-client：

   npm install oidc-client@1.9.0 --save
   

2. 修改Webpack配置中的ProvidePlugin，直接指向npm包而非本地文件：

   plugins: [
     // ...其他插件配置
     new webpack.ProvidePlugin({ 
       Oidc: 'oidc-client', 
       "window.Oidc": 'oidc-client' 
     }),
     // ...其他插件配置
   ]
   

   这个配置会让Webpack把oidc-client包导出的Oidc对象自动注入到全局作用域和window对象中，AngularJS服务就能正常访问Oidc.UserManager了。

解决方案二：保留本地oidc-client.js文件的处理方式 #

如果你坚持使用本地的oidc-client.js，需要用script-loader强制让它在全局作用域执行，从而挂载window.Oidc：

1. 安装script-loader：

   npm install script-loader --save-dev
   

2. 在你的AngularJS入口文件（比如app.js）中添加加载语句：

   require('script-loader!./app-old/scripts/oidc-client.js');
   

3. 移除Webpack配置中关于Oidc的ProvidePlugin配置，因为script-loader会直接把Oidc挂载到window上，AngularJS服务可以直接访问全局的Oidc。

额外验证步骤 #

修改配置后，重启WebpackDevMiddleware，在浏览器控制台输入window.Oidc，确认它包含UserManager构造函数。如果能正常输出，说明配置生效，你的authService.js就能正常实例化UserManager了。

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