Angular CLI 新建Bootstrap项目报Bootstrap dropdown require Popper.js错误

问题


基于Angular cli新建bootstrap项目,angular-cli.json的script配置如下:

"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 control报错:

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), :6:17548)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :6:23163)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :6:50902)
    at eval ()
    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)

解决方案


在angular-cli.json的script里,需要把popper.min.js放在bootstrap.min.js之前。

版权声明:著作权归作者所有。

相关推荐

Bootstrap在图片内居中显示文字

图片的父容器position设置为relative。文字position设置为absolute。.thumbnail {   position: relative; } .caption {   position: absolute;  top: 45%;  left: 0;  &nbs

使用stackblitz在线运行github上基于Angular CLI构建的项目

在Github上面有很多Angular的demo,示例等等,我们要运行Github里的示例,需要经过下载,初始化项目,然后才到运行项目,这中间会花去很多时间。有一个叫做StackBlitz的项目,它可以看作一个轻量级的在线的IDE,它允许我们在线运行基于Angular CLI构建的项目。更进一步,对于Github上的项目,我们只需要简单地在浏览器输入对应的url即可运行我们想要的项目。示

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预