Bootstrap无法与我的Angular项目一起使用

时间:2018-06-20 07:51:35

标签: angular angular-cli angular-ui-bootstrap angular6 angular-cli-v6

我已按照以下步骤将引导程序包含到Angular项目中

  1. 使用cli创建角度项目
  2. npm install 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>
版本详细信息是: Angular CLI:6.0.8

节点:8.11.2

操作系统:win32 x64

角度:6.0.5

...动画,通用,编译器,compiler-cli,核心,表格

... http,语言服务,平台浏览器

...平台浏览器动态,路由器

打包版本

@ angular-devkit / architect 0.6.8

@ angular-devkit / build-angular 0.6.8

@ angular-devkit / build-optimizer 0.6.8

@ angular-devkit / core 0.6.8

@ angular-devkit / schematics 0.6.8

@ angular / cli 6.0.8

@ ngtools / webpack 6.0.8

@ schematics /角度为0.6.8

@ schematics /更新0.6.8

rxjs 6.2.1

打字稿2.7.2

webpack 4.8.3

谢谢

2 个答案:

答案 0 :(得分:1)

将您的引导程序文件添加到全局 styles.css 文件中,如下所示:-

Timer

答案 1 :(得分:0)

我怀疑问题是文件的路径。包含依赖关系的最佳方法是在“ 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,但在您的示例中没有看到它。我在这里添加了它,以防万一。