Angular 5升级后出现Cannot find module 'popper.js'问题求助

你在升级ASP.NET Core Angular项目到Angular 5时遇到的这个问题，本质是Bootstrap 4依赖的popper.js没有被正确纳入webpack的vendor打包流程中。下面是一步步的解决方法：

步骤1：确认popper.js安装状态 #

虽然你的package.json里已经列出了popper.js，但先重新安装一次，避免缓存或安装不完整的问题：

npm install popper.js --save

步骤2：更新webpack.vendor.js配置（核心修复） #

ASP.NET Core的Angular模板会通过webpack.vendor.js生成公共依赖的vendor bundle，你需要把popper.js加入到vendor的入口列表里，注意要放在jquery之后、bootstrap之前（因为Bootstrap的JS逻辑依赖popper.js）：

找到你的webpack.vendor.js文件，修改entry部分：

entry: {
    vendor: [
        '@angular/animations',
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        // ... 其他Angular相关依赖
        'jquery',
        'popper.js', // 新增这一行
        'bootstrap',
        'rxjs',
        'zone.js'
    ]
}

步骤3：重新生成Vendor Bundle #

运行命令重新构建vendor bundle，确保popper.js被打包进vendor文件中：

webpack --config webpack.vendor.js

如果你的package.json里配置了对应的npm脚本（比如build:vendor），也可以直接运行：

npm run build:vendor

步骤4：验证代码中的引用（可选） #

如果上面的步骤仍未解决问题，检查项目的入口文件（比如boot.browser.ts），确保正确引入了依赖：

import 'popper.js';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap/dist/css/bootstrap.css';

问题原因说明 #

在Angular 4版本的模板中，Bootstrap的依赖处理逻辑可能不需要显式声明popper.js，但升级到Angular 5后，webpack的vendor打包配置没有同步更新，导致popper.js未被包含进运行时依赖，最终触发模块找不到的错误。

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