Bootstrap не работает с моим проектом Angular

Я включил начальную загрузку в свой проект Angular, выполнив следующие шаги

  1. Создал угловой проект с cli
  2. npm установить bootstrap @ 3 jquery --save
  3. Затем добавили пути к сценариям и стилям в мой индексный файл, как мы обычно делаем

Стиль не применяется к моей странице. Есть ли что-нибудь еще, что мне нужно сделать? Я добавляю фрагмент кода HTML со страницы индекса

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project</title>
  <script  src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>ewreeew</h1>
    <button class="btn btn-primary">Test Button</button>
  <app-root></app-root>
</body>
</html>
The version details are: Angular CLI: 6.0.8

Узел: 8.11.2

ОС: win32 x64

Угловой: 6.0.5

... анимации, общие, компилятор, компилятор-cli, ядро, формы

... http, языковая служба, платформа-браузер

... платформа-браузер-динамический, маршрутизатор

Версия пакета

@ angular-devkit / архитектор 0.6.8

@ angular-devkit / сборка-угловой 0.6.8

@ angular-devkit / build-optimizer 0.6.8

@ angular-devkit / ядро ​​0.6.8

@ angular-devkit / схемы 0.6.8

@ угловой / cli 6.0.8

@ ngtools / webpack 6.0.8

@ schematics / angular 0.6.8

@ schematics / update 0.6.8

rxjs 6.2.1

машинописный текст 2.7.2

webpack 4.8.3

Спасибо


angular angular-cli angular6 angular-ui-bootstrap angular-cli-v6
person maximus1988    schedule 20.06.2018    source источник
comment
Можете ли вы показать, как вы добавляете скрипт / стиль в свой индекс?   -  person Zooly    schedule 20.06.2018
comment
Вот HTML-код ‹head› ‹meta charset = utf-8› ‹title› Project ‹/title› ‹script src = .. / node_modules / bootstrap / dist / js / bootstrap.min.js› ‹/script› ‹ ссылка rel = stylesheet href = .. / node_modules / bootstrap / dist / css / bootstrap.min.css ›‹ link rel = stylesheet href = .. / node_modules / bootstrap / dist / css / bootstrap-theme.min.css ›‹ base href = / ›‹ meta name = viewport content = width = device-width, initial-scale = 1 ›‹/head›   -  person maximus1988    schedule 20.06.2018
comment
Хммм, вам следует отредактировать свой вопрос с помощью этого кода. Какую версию Angular вы используете?   -  person Zooly    schedule 20.06.2018
comment
У меня были похожие проблемы, но какой сервер (бэкэнд) вы используете? если вы используете node (express), попробуйте включить общую папку (app.use) в свое приложение   -  person Joel Wembo    schedule 21.06.2018

Ответы (2)


arrow_upward
4
arrow_downward

Добавьте файл начальной загрузки в глобальный файл styles.css следующим образом: -

@import "~bootstrap/dist/css/bootstrap.css";
person Ronak Khangaonkar    schedule 15.06.2019

arrow_upward
0
arrow_downward

Подозреваю, что проблема в пути к файлам. Лучший способ включить зависимости - это добавить к массиву стилей и скриптов в целевой объект сборки файла "angular.json". Вы можете использовать абсолютные пути вместо относительных, поэтому вместо «../node_modules/» вы захотите использовать «node_modules /».

Вот пример того, как может выглядеть цель сборки:

 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
     "styles": [                  
       "src/styles.css",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
       "node_modules/bootstrap/dist/css/bootstrap-theme.min.css"   
     ],
     "scripts": [
       "node_modules/jquery/dist/jquery.min.js",
       "node_modules/bootstrap/dist/js/bootstrap.min.js"
     ]
  }

Возможно, вы уже включаете jQuery, но я не видел этого в вашем примере. Добавил сюда на всякий случай.

person nephiw    schedule 23.03.2019