如何在无Bootstrap和jQuery的Angular 5中正确配置Popper.js？

我来帮你搞定这个配置问题！你之前的思路有点小偏差，因为Popper.js的ESM模块是模块化导出的，不是全局变量，所以直接声明declare var Popper是行不通的。下面是正确的配置步骤：

步骤1：确认Popper.js安装完成 #

你已经完成了这一步，再确认下命令没问题：

npm install popper.js --save

步骤2：移除angular-cli scripts中的配置 #

不需要把popper.js/dist/esm/popper.js加到scripts数组里，Angular 5支持直接导入ES模块，全局引入反而会导致变量作用域冲突的问题。

步骤3：在组件中正确导入并使用Popper.js #

在需要使用Popper的组件里，直接通过模块化方式导入：

import * as Popper from 'popper.js';
// 部分版本也支持默认导入：
// import Popper from 'popper.js';

然后在组件的生命周期钩子（比如ngAfterViewInit，确保DOM元素已渲染完成）里初始化Popper实例：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import * as Popper from 'popper.js';

@Component({
  selector: 'app-your-component',
  template: `
    <button #triggerBtn>点击弹出</button>
    <div #popperBox>这是Popper弹出内容</div>
  `
})
export class YourComponent implements AfterViewInit {
  @ViewChild('triggerBtn') triggerElement: ElementRef;
  @ViewChild('popperBox') popperElement: ElementRef;
  private popperInstance: Popper;

  ngAfterViewInit() {
    // 初始化Popper实例
    this.popperInstance = new Popper(
      this.triggerElement.nativeElement,
      this.popperElement.nativeElement,
      {
        placement: 'bottom', // 可选top/bottom/left/right等位置
        modifiers: {
          offset: { offset: '0, 10' } // 自定义偏移量
        }
      }
    );
  }

  // 组件销毁时清理Popper实例，避免内存泄漏
  ngOnDestroy() {
    this.popperInstance?.destroy();
  }
}

为什么之前的方法无效？ #

你看到的var Popper = function () { }是ESM模块内部的导出逻辑，它并没有挂载到全局window对象上，所以你声明declare var Popper找不到对应的全局变量，自然会抛出未定义的错误。通过模块化导入的方式，才能正确获取到Popper的构造函数。

内容的提问来源于stack exchange，提问作者Karl Johan Vallner