狛ログ

2019年2月27日水曜日

Angular angular.json の scripts は記載する順番が大事、と言う話（bootstrap、popper）

2月 27, 2019

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

Angular の angular.json には、外部のJavaScriptの読み込む為に、「scripts」と言う項目が存在しますが、そこに記載する際は、順番が大事だよ、と言う話です。
まあ、Angularに限った事じゃ無いのですが、毎回ハマるので、備忘録で記載します。

とある新規プロジェクトで、デザイナーが作ったhtmlをせっせとAngularプロジェクトに移植していたのですが、ポップアップ系の表示がエラーになってしまいました。
zone.js:192 Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at c.t.toggle (bootstrap.min.js:6)
    at HTMLAnchorElement. (bootstrap.min.js:6)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.c._jQueryInterface [as dropdown] (bootstrap.min.js:6)
    at HTMLAnchorElement. (bootstrap.min.js:6)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

「Bootstrap dropdown require Popper.js」なので、
ああ、「bootstrap.min.js」が「Popper.js」を必要としているのね、と言う事で、まずはインストールしました。
npm install popper.js --save

その後、angular.jsonに「Popper.js」追加しました。 
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js",
        "node_modules/popper.js/dist/umd/popper.min.js"
    ]
既に、「bootstrap.min.js」は追加していあったので、その直後に追記しました。
（これが良くなかった・・・・）

その後も一向にエラーが消えることがありません。
少し考えた後、「これ、もしかして順番かな？」と思い、
    "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"
    ]

順番を入れ替えたらエラーも消えました。
いやー、どハマりする前に気付けて良かったです。

何事も読み込む順番には気を付けようね、と言う話でした。
あまり、Angular関係無かったですね。
次回はもっとAngularっぽい機能を書いていこうと思います。

それでは、良いAngularライフを！


0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)

Recent Posts

Posts