相关疑难解决方法(0)

我有一个全新的Angular 4 CLI应用程序.运行之后:

npm install bootstrap@4.0.0-beta jquery popper.js --save

和编辑.angular-cli.json像这样:

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

我在Chrome控制台中仍有问题:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:17548)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:23163)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:50902)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js (bootstrap.min.js?f885:1)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at webpackJsonpCallback (bootstrap a2f1d85ef068872b0530:25)

我该如何解决？

所以Bootstrap 4 Beta出来......是的!然而,Tether已被替换Popper.js为工具提示(和其他功能).我在控制台中看到一个错误,足以告诉我更改为Popper.js:

Bootstrap dropdown require Popper.js

看起来很简单,我去更新了我的webpack.config.js(整个配置可以在这里看到)然后Bootstrap开始工作(我做的唯一改变是用Popper替换Tether):

plugins: [
new ProvidePlugin({
  'Promise': 'bluebird',
  '$': 'jquery',
  'jQuery': 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery',
  Popper: 'popper.js' 
}),

我也在import 'bootstrap'我的main.ts文件中做了.

但是我现在有另一个问题(我没有使用Tether),在控制台中抛出一个新错误:

Uncaught TypeError: Popper is not a constructor

如果我尝试在Chrome中进行调试,我确实已经Popper将其作为对象加载(这就是Bootstrap停止抱怨的原因),您可以在下面的打印屏幕中看到.

最后包括我的所有代码.我使用Bootstrap工具提示与一个简单的自定义元素构建Aurelia和TypeScript(以前用于以前的Bootstrap alpha 6和Tether)

import {inject, customAttribute} from 'aurelia-framework';
import * as $ from 'jquery';

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
  element: HTMLElement;

  constructor(element: HTMLElement) …