[解決済み] Bootstrap4依存のPopperJsがAngularでエラーを起こす
2023-01-22 09:28:58
質問
私はちょうど新しい
angular-cli
プロジェクトを作成しました。
を実行し
npm install [email protected] jquery popper.js --save
を実行し
.angular-cli.json
の関連部分を以下のように変更しました。
"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"
],
というエラーが表示されます。
10:2287 Uncaught SyntaxError: Unexpected token export
at eval (<anonymous>)
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
この問題を解決する方法はありますか?
どのように解決するのですか?
のドキュメントを見ると 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"
],
その後、現在では動作しているようです。
関連
-
[解決済み] Bootstrap:Bootstrapのバージョンを識別する方法は?
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み] twitterのbootstrapで五等分の列を作る
-
[解決済み】Twitter bootstrapのモーダルバックドロップが消えない件
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] bowerでbootstrapを使用する
-
[解決済み] Bootstrap 4 datapicker.jsが含まれていません [閉鎖].
-
[解決済み] bootstrapのtabindex="-1 "は何のためにあるのか?
-
[解決済み] Bootstrapの中央見出し
-
[解決済み] Twitter Bootstrapの名前空間を利用してスタイルが衝突しないようにする方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] B-tableのBootstrapVue条件列
-
[解決済み】リストセレクトボックス(ドロップダウン)をbootstrapでレンダリングする方法は?
-
[解決済み] reactjsアプリでbootstrapのcssとjsをインクルードする方法は?
-
[解決済み] Bootstrap 4: ドロップダウンメニューが画面の右側にずれていく
-
[解決済み] 行を組み合わせたブートストラップ(rowspan)
-
[解決済み] Bootstrapのcolは右寄せ
-
[解決済み] bootstrap 4 の popper.js で SyntaxError Unexpected token export が発生する。
-
[解決済み] Bootstrapでテーブルの行をソートする [終了しました]。
-
[解決済み] Bootstrapの中央見出し
-
[解決済み] Bootstrap 3 Horizontal Divider (ドロップダウンではありません)