blocks|key|104398|text|我可以看到很多人都在努力添加并正确地包含Bootstrap4依赖项(jQuery、popper.js等)。但是有一个更简单的解决方案，那就是https://ng-bootstrap.github.io。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|104399|ng-bootstrap提供了从头开始编写的本地Angular指令。积极的结果是：*您不需要包含和担心jQuery、popper.js等。*指令提供了在Angular世界中“有意义”的API|104400|对于任何试图使用带Angular+-+ng-bootstrap的Bootstrap+4.beta的人来说，刚刚发布了它的第一个测试版，它与Bootstrap+4.beta+CSS完全兼容|104401|entityMap|0|LINK|mutability|MUTABLE|url|https://ng-bootstrap.github.io/^0|1Y|U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

I can see that many people are struggling with adding and properly including Bootstrap 4 dependencies (jQuery, popper.js etc.). But there is a much easier solution in the form of <a href="https://ng-bootstrap.github.io" rel="nofollow noreferrer">https://ng-bootstrap.github.io</a>.

ng-bootstrap provides native Angular directives written from the ground up. The positive consequence is that:
* you don't need to include and worry about jQuery, popper.js etc.
* directives provide APIs that "make sense" in the Angular world

For anyone trying to use Bootstrap 4.beta with Angular - ng-bootstrap just released its first beta which is fully compatible with Bootstrap 4.beta CSS

blocks|key|104403|text|查看https://getbootstrap.com/docs/4.2/getting-started/introduction/#js上的文档，您可以看到它们导入了以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|104404|<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%2BY1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"+crossorigin="anonymous"></script>
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"+integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5%2B76PVCmYl"+crossorigin="anonymous"></script>|code-block|syntax|javascript|104405|注意命名:+jquery.slim.min.js，umd/popper.min.js！|style|BOLD|104406|因此，我在.angular-cli.json中使用了以下代码|CODE|104407|++++++"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"
++++++],|104408|在那之后，它现在似乎起作用了。|104409|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.2/getting-started/introduction/#js^0|2|1U|0|0|0|D|4|P|3|0|5|H|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@$A|17|B|18|K|L]|$A|19|B|1A|K|L]]|9|@]|C|$]]|$1|M|3|N|5|6|7|1B|8|@$A|1C|B|1D|K|O]]|9|@]|C|$]]|$1|P|3|Q|5|F|7|1E|8|@]|9|@]|C|$G|H]]|$1|R|3|S|5|6|7|1F|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

Looking at the docs at <a href="https://getbootstrap.com/docs/4.2/getting-started/introduction/#js" rel="noreferrer">https://getbootstrap.com/docs/4.2/getting-started/introduction/#js</a> you can see that they import the following:

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

Note the naming: jquery.slim.min.js, umd/popper.min.js!

Therefore I used the following in my <code>.angular-cli.json</code>:

<pre><code> "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"
 ],
</code></pre>

After that it seems to work now.

blocks|key|104649|text|我也有同样的问题。我的解决方案是导入umd文件夹，而不是导入dist文件夹(./_/popper.js/dist/popper.js)无论您获得的是js-file的迷你版本还是普通版本。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|104650|entityMap^0|14|1|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I had the same problem. My solution was not to import the dist-folder (./node_modules/popper.js/dist/popper.js) but rather the umd-folder (./node_modules/popper.js/dist/umd/popper.js). Does not matter if you get the mini or normal version of the js-file.

blocks|key|104432|text|如果你在Asp.net、Mvc、、umd、中工作，你也可以这样做。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|104433|就像在https://stackoverflow.com/a/50839939/8497522中一样，只需添加BundleConfig.cs：|104434|bundles.Add(new+ScriptBundle("~/bundles/popper").Include("~/Scripts/umd/popper.js"));|code-block|syntax|javascript|104435|例外的是：|104436|bundles.Add(new+ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));|104437|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/50839939/8497522^0|G|5|0|3|18|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

If you work in Asp.net Mvc umd also do the thing.

As in <a href="https://stackoverflow.com/a/50839939/8497522">https://stackoverflow.com/a/50839939/8497522</a> just add in BundleConfig.cs:

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

except:

<pre><code>bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));
</code></pre>

blocks|key|2639271|text|要运行模式，请在tsconfig.ts中将目标从"es2015“更改为"es5”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2639272|"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"]+
}|code-block|syntax|javascript|2639273|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To run modal please change the target from "es2015" to "es5" in tsconfig.ts

<pre><code>"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"] 
}
</code></pre>

blocks|key|2639339|text|在上面的答案中找到了提示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2639340|1)在引导之前包含popper.js|offset|length|style|CODE|2639341|2639342|更新popper.js文件的路径。使用/dist/umd而不是/dist|ordered-list-item|2639343|2639344|angular-cli.json文件中的popper的正确路径是|2639345|./node_modules/popper.js/dist/umd/popper.js|code-block|syntax|javascript|2639346|entityMap^0|0|9|9|0|0|J|9|V|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|17|8|@]|9|@]|A|$R|S]]|$1|T|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|U|$]]

Found hints in answers above :
1)Include <code>popper.js</code> before bootstrap
<ol start="2">
<li>Update the path to popper.js file.
Using <code>/dist/umd</code> instead of <code>/dist</code></li>
</ol>
The correct path to popper was in angular-cli.json file was
<pre><code>./node_modules/popper.js/dist/umd/popper.js
</code></pre>

I just created a brand new <a href="/questions/tagged/angular-cli" class="post-tag" title="show questions tagged &#39;angular-cli&#39;" rel="tag">angular-cli</a> project 
and ran <code>npm install bootstrap@4.0.0-beta jquery popper.js --save</code> 
and changed the .angular-cli.json's related parts as below

<pre><code> "styles": [
 "../node_modules/bootstrap/dist/css/bootstrap.css"
 ],
 "scripts": [
 "../node_modules/jquery/dist/jquery.js",
 "../node_modules/popper.js/dist/popper.js",
 "../node_modules/bootstrap/dist/js/bootstrap.js"
 ],
</code></pre>

however receiving the error below

<pre><code>10:2287 Uncaught SyntaxError: Unexpected token export
 at eval (&lt;anonymous&gt;)
 at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
 at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
 at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
 at Object.2 (scripts.bundle.js:66)
 at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
 at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
 at scripts.bundle.js:1
</code></pre>

any idea how to fix it?

Bootstrap4 dependency PopperJs throws error on Angular

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我刚刚创建了一个全新的项目并运行npm install bootstrap@4.0.0-beta jquery popper.js --save并更改了.angular-cli.json's相关部分，如下所示  "styles": [    "../node_modules/bootstrap/dist/css/boo...

问Bootstrap4依赖PopperJs在角度上抛出错误
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap4依赖PopperJs在角度上抛出错误EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap4依赖PopperJs在角度上抛出错误
EN