如何将bootstrap添加到angular-cli项目中

Question

我们想在使用angular-cli 1.0.0-beta.5(w/node v6.1.0)生成的应用程序中使用bootstrap 4(4.0.0-alpha.2).

在使用npm获取引导程序及其依赖项后,我们的第一种方法是将它们添加到angular-cli-build.js:

  'bootstrap/dist/**/*.min.+(js|css)',  
  'jquery/dist/jquery.min.+(js|map)',  
  'tether/dist/**/*.min.+(js|css)',

并将它们导入我们的 index.html

  <script src="vendor/jquery/dist/jquery.min.js"></script>
  <script src="vendor/tether/dist/js/tether.min.js"></script>
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

这很好用,ng serve但是一旦我们生成了带有-prod标志的构建,所有这些依赖关系都消失了dist/vendor(惊喜!).

我们打算如何在使用angular-cli生成的项目中处理这种情况(即加载引导程序脚本)？

我们有以下想法,但我们真的不知道要走哪条路......

• 使用CDN？但我们宁愿提供这些文件以保证它们可用

• 复制依赖关系到dist/vendor我们之后ng build -prod？但这似乎是angular-cli应该提供的东西,因为它"照顾"构建部分？

• 在src/system-config.ts中添加jquery,bootstrap和tether,并以某种方式将它们拉入main.ts中的bundle中？但考虑到我们不打算在我们的应用程序代码中明确使用它们(例如,不像moment.js或像lodash这样的东西),这似乎是错误的

Answer 1

重要更新: ng2-bootstrap现在由ngx-bootstrap替换

ngx-bootstrap支持Angular 3和4.

更新: 1.0.0-beta.11-webpack或更高版本

首先使用终端中的以下命令检查您的angular-cli版本:

ng -v

如果您的angular-cli版本大于1.0.0-beta.11-webpack,那么您应该按照以下步骤操作:

1. 安装ngx-bootstrap和bootstrap:

   npm install ngx-bootstrap bootstrap --save
   

这条线现在安装了Bootstrap 3,但将来可以安装Bootstrap 4.请记住,ngx-bootstrap支持这两个版本.

2. 打开src/app/app.module.ts并添加:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })
   

3. 打开angular-cli.json并在styles数组中插入一个新条目:

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

4. 打开src/app/app.component.html并添加:

   <alert type="success">hello</alert>
   

1.0.0-beta.10或更低版本:

并且,如果您的angular-cli版本是1.0.0-beta.10或更低版本,那么您可以使用以下步骤.

首先,转到项目目录并键入:

npm install ngx-bootstrap --save

然后,打开你的angular-cli-build.js并添加以下行:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

现在,打开你的src/system-config.ts然后写:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...和:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Answer 2

在https://github.com/angular/angular-cli上查找关键词>全局库安装可帮助您找到答案.

根据他们的文档,您可以采取以下步骤添加Bootstrap库.

首先从npm安装Bootstrap:

npm install bootstrap@next

然后将所需的脚本文件添加到angular-cli.json文件中的apps [0] .scripts:

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

最后将Bootstrap CSS添加到apps [0] .styles数组:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
    ],

如果您正在运行它,请重新启动,并且Bootstrap 4应该在您的应用上运行.

这是最好的解决方案.但是,如果你不重新启动服务,它永远不会工作.强烈建议您执行此操作.

Answer 3

请执行下列操作:

npm i bootstrap@next --save

这将为您的项目添加bootstrap 4.

接下来去你src/style.scss或src/style.css文件(自由选择你正在使用)和进口自举有:

对于style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

对于style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

对于脚本,您仍然需要在angular-cli.json文件中添加文件(在Angular版本6中,此编辑需要在angular.json文件中完成):

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Answer 4

首先,您必须使用这些命令安装tether,jquery和bootstrap

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

在angular-cli.json(从版本6开始的angular.json)文件中添加这些行之后

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Answer 5

由于没有人提到关于如何包含Bootstrap的官方(angular-cli团队)故事:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

包括Bootstrap

Bootstrap是一种流行的CSS框架,可以在Angular项目中使用.本指南将引导您向Angular CLI项目添加引导程序并将其配置为使用引导程序.

使用CSS

入门

创建一个新项目并导航到该项目

ng new my-app
cd my-app

安装Bootstrap

随着新项目的创建和准备,您接下来需要将bootstrap作为依赖项安装到项目中.使用该--save选项,依赖项将保存在package.json中

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

配置项目

现在项目已设置,必须将其配置为包含引导程序CSS.

• .angular-cli.json从项目的根目录打开文件.
• 在该属性下apps,该数组中的第一项是默认应用程序.
• 有一个属性styles允许将外部全局样式应用于您的应用程序.
• 指定路径 bootstrap.min.css

完成后,它应如下所示:

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

注意:进行更改时,.angular-cli.json需要重新启动ng serve以获取配置更改.

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置应用程序后,运行ng serve以在开发模式下运行应用程序.在浏览器中导航到应用程序localhost:4200.验证是否显示bootstrap样式按钮.

使用SASS

入门

创建一个新项目并导航到该项目

ng new my-app --style=scss
cd my-app

安装Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

配置项目

创建一个空文件_variables.scss在src/.

如果您使用bootstrap-sass,请将以下内容添加到_variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

在styles.scss添加以下内容:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置应用程序后,运行ng serve以在开发模式下运行应用程序.在浏览器中导航到应用程序localhost:4200.验证是否显示bootstrap样式按钮.要确保打开变量_variables.scss并添加以下内容:

$brand-primary: red;

返回浏览器以查看更改的字体颜色.

Answer 6

更新v1.0.0-beta.26

您可以在文档查看导入引导的新途径这里

如果仍然无效,请使用命令ng serve重新启动

1.0.0或更低版本:

在index.html文件中,您只需要bootstrap css链接(不需要js脚本)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

和

npm install ng2-bootstrap --save
npm install moment --save

在my_project/src/system-config.ts中安装ng2-bootstrap之后 :

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

在my_project/angular-cli-build.js中:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

不要忘记此命令将您的模块放入供应商:

ng build

从另一个原理相同的模块导入.

Answer 7

我猜上面的方法在发布后发生了变化,请检查此链接

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

启动项目

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

安装ng-bootstrap和bootstrap

npm install ng2-bootstrap bootstrap --save

打开src/app/app.module.ts并添加

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

打开angular-cli.json并在styles数组中插入一个新条目

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

打开src/app/app.component.html并通过添加测试所有工作

<alert type="success">hello</alert>

Answer 8

1. 安装引导程序

   npm install bootstrap@next
   

2. 将代码添加到 .angular-cli.json：

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

3. 最后将 bootstrap.css 添加到您的代码 style.scss

   @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
   

4. 重新启动本地服务器

Answer 9

Angular 5中的Bootstrap 4的步骤

1. 创建Angular 5项目

   新的AngularBootstrapTest

2. 移至项目目录

   cd AngularBootstrapTest

3. 下载bootstrap

   npm安装bootstrap

4. 将Bootstrap添加到项目中

   4.1打开.angular-cli.json

   4.2找到json中的"styles"部分

   4.3添加bootstrap css路径如下

   .

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

现在,您已成功在angular 5项目中添加了bootstrap css

测试引导程序

5. 打开 src/app/app.component.html
6. 添加引导按钮组件

.

<button type="button" class="btn btn-primary">Primary</button>

你可以参考这里的按钮样式(https://getbootstrap.com/docs/4.0/components/buttons/)

7. 保存文件

8. 运行项目

   ng serve - 打开

现在您将在页面中看到引导样式按钮

注意:如果您在ng serve之后添加了bootstrap路径,则必须停止并重新运行ng服务以反映更改

Answer 10

运行此命令

npm install bootstrap@3

你的 Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

Answer 11

安装升压器

npm install --save bootstrap

然后我们需要将 Bootstrap Sass 导入到我们的应用程序中。在 styles.scss 中添加以下行：

@import "../node_modules/bootstrap/scss/bootstrap.scss";

欲了解更多信息...

Answer 12

由于这变得如此令人困惑,这里的答案完全是混合的,我只是建议与官方的ui团队一起进行BS4回购(是的,NG-Bootstrap有很多这样的回购.

只需按照https://github.com/ng-bootstrap/ng-bootstrap中的说明获取BS4即可.

从lib引用:

这个库是由ui-bootstrap团队从头开始构建的.我们使用TypeScript并定位Bootstrap 4 CSS框架.

与Bootstrap 4一样,此库正在进行中.请查看我们的问题列表,了解我们正在实施的所有事项.随意在那里发表评论.

只是复制粘贴那里的东西:

npm install --save @ng-bootstrap/ng-bootstrap

安装完成后,您需要导入我们的主模块:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

剩下的唯一部分是在应用程序模块中列出导入的模块.对于根(顶级)模块,确切的方法将略有不同,您应该以类似的代码结束(注意NgbModule.forRoot()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

您的应用程序中的其他模块可以简单地导入NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

到目前为止,这似乎是最一致的行为

Answer 13

2个简单的步骤

1. 安装 Bootstrap（正在安装最新版本）

npm install bootstrap@next

2. 导入到您的项目中，在您的styles.scss 中添加以下行

@import '~bootstrap';

请注意您的导入顺序可能很重要，如果您有其他使用引导程序的库，请将此导入语句放在最前面

结束。:)

注意：以下是我的版本

角度：9

节点：v10.16.0

npm : 6.9.1

Answer 14

执行以下步骤:

1. npm install --save bootstrap

2. 在.angular-cli.json中,添加到样式部分:

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

之后,您必须重新启动ng服务

请享用

Answer 15

1. 使用 npm 安装 Bootstrap

   npm install bootstrap
   

2.安装Popper.js

npm install --save popper.js

3.转到Angular 6 项目中的angular.json / Angular 5 中的.angular-cli.json并添加列出的：

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]