Bootstrap4依赖项PopperJs在Angular上引发错误

我有同样的问题。我的解决方案不是导入dist文件夹（./node_modules/popper.js/dist/popper.js），而是导入umd文件夹（./node_modules/popper.js/dist/ umd /popper.js）。获取js文件的迷你版还是普通版都没关系。

查看https://getbootstrap.com/docs/4.2/getting-started/introduction/#js上的文档，您会发现它们导入了以下内容：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

请注意命名：jquery。苗条的 .min.js，umd /popper.min.js！

因此，我在以下代码中使用了以下内容.angular-cli.json：

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

之后，它现在似乎可以工作了。

要运行模式，请在tsconfig.ts中将目标从“ es2015”更改为“ es5”

"styles": [ "src/styles.css", 
            "node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
"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"] 
}

我可以看到许多人都在努力添加和正确包含Bootstrap 4依赖项（jQuery，popper.js等）。但是，还有一个更简单的解决方案，形式为https://ng-bootstrap.github.io。

ng-bootstrap提供了从头开始编写的本地 Angular指令。积极的结果是：*您不需要包括和担心jQuery，popper.js等。*指令提供了在Angular世界中“有意义”的API。

对于任何试图将Bootstrap 4.beta与Angular结合使用的人-ng-bootstrap刚刚发布了它的第一个Beta，它与Bootstrap 4.beta CSS完全兼容

如果您在Asp.net中工作，Mvc umd也可以执行此操作。

如https://stackoverflow.com/a/50839939/8497522中所示，只需添加BundleConfig.cs：

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/umd/popper.js"));

除了：

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));