.NET Core Angular 5项目找不到popper.js模块问题求助

我之前在VS2017的.NET Core Angular 5项目里更新包后，也碰到过完全一样的Bootstrap 4 + Popper.js导入坑！折腾了好一阵才弄明白，给你一步步拆解解决方案：

第一步：确认依赖安装与版本匹配 #

首先要确保你装的是正确的包，Bootstrap 4的JS部分依赖jQuery和popper.js（注意是带.js后缀的包，不是旧的popper包）。如果还没装全，先运行：

npm install jquery popper.js bootstrap --save

要注意版本匹配：Bootstrap 4.x对应popper.js@^1.16.0版本，别装太高版本，不然会有兼容问题。

第二步：正确配置脚本加载顺序 #

这是最容易踩坑的地方！Bootstrap 4要求脚本加载顺序必须是：jQuery → Popper.js → Bootstrap JS，而且Popper.js必须用UMD版本（因为Bootstrap期望全局变量，而不是ES模块）。

如果你用Angular CLI（VS2017模板默认是这个） #

打开根目录下的angular-cli.json，找到scripts数组，按顺序添加：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

路径要对应你的node_modules位置，别写错了！

如果你一定要在boot.browser.ts里导入 #

别直接写import 'popper.js'，要指定UMD版本的路径，顺序同样不能乱：

import 'jquery/dist/jquery.min.js';
import 'popper.js/dist/umd/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';

第三步：导入Bootstrap CSS #

别忘了在全局样式文件（比如src/styles.css）里导入Bootstrap的CSS：

@import '~bootstrap/dist/css/bootstrap.min.css';

第四步：清理缓存重新构建 #

有时候更新包后会有缓存问题，按以下步骤来：

1. 删除根目录下的node_modules文件夹和package-lock.json文件
2. 运行npm install重新安装所有依赖
3. 在VS里点击"清理解决方案"，再重新生成项目
4. 清空浏览器缓存后刷新页面

第五步：测试功能是否正常 #

在你的组件模板里加个测试用的Tooltip：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="测试Tooltip">Hover me</button>

然后在组件类里初始化Tooltip（因为Angular的DOM加载机制，要等视图初始化后再调用）：

import { Component, AfterViewInit } from '@angular/core';

declare var $: any; // 声明jQuery全局变量

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    $('[data-toggle="tooltip"]').tooltip();
  }
}

如果鼠标悬停能正常显示Tooltip，就说明配置成功了！

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