Q&A
ご提示のコードを試してみましたが、クリックするとメニューが開きました。
つまり、問題が再現しませんでした。
ご提示いただいていない部分に原因があると思われます。（たとえば、jQueryを読み込んでいないとか）
下記のドキュメントのExternal contentの章で記述されているサンプルコードをそのまま
コピーすると、レイアウトはそのまま黒のヘッダーにアイコンという状態で再現できます。
https://getbootstrap.com/docs/4.1/components/navbar/
ただ、アイコンを押下してもメニューを展開できない状態です。
何か追加で設定する必要があるのでしょうか？
エラーは開発者モードで確認しましたが出ておりません。
なお、Angularアプリで動作確認しております。
ご指摘頂いた通り、jqueryをインストールしていなかったため下記コマンドでインストールしました。
npm install --save jquery
その後index.htmlに下記追加
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
しかし動きません。。。
よくわからないのですが、そのパスでビルド後のスクリプトを読み込めるのですか？
Angularアプリで、PJにnode_modulesがありその配下に
/jquery/dist/jquery.js
/bootstrap/dist/js/bootstrap.js
の存在は確認できるので読み込めるという認識です。
(質問に対してずれていればお手数ですがもう一度お声がけいただければ幸いです)
ng serve としてローカルビルドした時に、ブラウザ上でbootstrap.jsなどのソースが確認できる、ということですね。
かしこまりました。申し訳ないのですが、Angular は全くわからないので、別の回答者をお待ちください。
質問タグに Angular タグを使うことをおすすめします。
すいません、ng serveなど範囲外のことまでお調べ頂きありがとうございました。
Lhankor_Mhyさんがおっしゃていた通りjqueryなど入れるのに加え、bootstrap5.0のNavbarのサイトをよく見てみると
<div class="pos-f-t">
が5.0のドキュメントでは書かれておらず、消してみると動きました。お騒がせしました。。。
ご解決されて何よりです。
ご提示のドキュメントが4だったので、それでいいものとばかり思いこんでしまいました。
確認をすればよかったですね。
とんでもないです、バージョンなど現状の状態は質問者側が提示すべきなので。。。
お騒がせしました！
自己解決
