Angular 7: Jquery и Bootstrap не работают - PullRequest
Новая
       9

Angular 7: Jquery и Bootstrap не работают

0 голосов
/ 28 февраля 2019

После установки Bootstrap и Jquery с помощью этой команды npm установите bootstrap - сохранить все равно не удастся, если начальная загрузка установлена ​​в угловом положении или нет

enter image description here

Вывод: enter image description here

Шаблон HTML: 

<div style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" routerLink="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" routerLink="/page1">Page 1 <span class="sr-only">(current)</span></a>
      </div>
    </div>
  </nav>
  <button type="btn btn-primary">Hello</button>
 </div> 

<router-outlet></router-outlet>

Index.html: [Только если я добавляю jquery & Bootstrap cdn в index.html, тогда егоработает, но я думаю, что это не правильное решение, верно?] 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularAssignment</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>
<body class="hello">
  <app-root></app-root>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Как подсказал @ Даниэль Барта , делать npm install недостаточно .Теперь вам нужно импортировать установленный пакет в ваше приложение.

На корневом уровне вашего приложения найдите файл с именем angular.json .

Bootstrap :

  1. В этом файле json найдите свойство "styles", представляющее массив путей
  2. Добавьте "node_modules/bootstrap/dist/css/bootstrap.min.css" в конец этого массива

JQuery

  1. В этом файле json найдите свойство "scripts", представляющее массив опять-таки путей, но на этот раз js-файлов.
  2. Добавьте "node_modules/jquery/dist/jquery.min.js" в конец этого массива

Если вы хотите использовать bootstrap.js, добавьте его путь ниже, импорт jquery:

JQuery + bootstrap.js :

"node_modules / jquery / dist / jquery.min.js",

"node_modules / bootstrap / dist / js / bootstrap.js"

Итак, Bootstrap css + jquery + bootstrap.js Импорт должен выглядеть следующим образом: 

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

Если у вас уже есть свои собственные пути в стилях или сценариях.Лучи, оставьте их и добавьте эти пути к нижней части массивов.

Лучший совет, который я могу вам дать, - это изучить документацию Angular, немного изучить установку пакетов и как все это работает.

0 голосов
/ 28 февраля 2019

Если вы видите их в папке node_module.Это установлено.Но вы также должны импортировать модуль и CSS-файл в приложение Angular.Вы можете найти хороший материал для Bootstrap здесь , а для jQuery вам нужно перейти к файлу .angular-cli.json и передать его в свойство scripts:"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

...