如何将自举添加到angular度项目
我们想在我们的应用程序中使用angular度cli 1.0.0-beta.5（w / node v6.1.0）生成引导程序4（4.0.0-alpha.2）。
在使用npm获得bootstrap及其依赖关系之后，我们的第一种方法是在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标志生成一个构build所有这些依赖从dist/vendor消失（惊喜！）。
我们打算如何处理这种情况下（即加载引导脚本）在一个项目生成的angular度cli？
我们有以下想法，但我们不知道要走哪条路
-
使用CDN？ 但我们宁愿提供这些文件以保证它们可用
-
复制依赖关系
dist/vendor在我们ng build -prod？ 但是，这似乎是angular形气候应该提供的，因为它“照顾”构build部分？ -
在src / system-config.ts中添加jquery，bootstrap和tether，并以某种方式将它们拖入我们的main.ts包中？ 但是，考虑到我们不会在应用程序的代码中明确使用它们，这似乎是错误的（例如，不像moment.js或lodash）
**重要更新：ng2-bootstrap现在被ngx-bootstrapreplace**
ngx-bootstrap支持angular度3和angular度4。
更新： 1.0.0-beta.11-webpack或更高版本
首先在terminal中使用以下命令检查您的angular-cli版本： ng -v
如果您的angular-cli版本大于1.0.0-beta.11-webpack那么您应该按照以下步骤操作：
-
安装ngx-bootstrap和bootstrap ：
npm install ngx-bootstrap bootstrap --save
这条线现在安装bootstrap 3，但将来可以安装bootstrap 4。 请记住ngx-bootstrap支持这两个版本。
-
打开src / app / app.module.ts并添加
import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... }) -
打开angular-cli.json并将新条目插入到样式数组中
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], -
打开src / app / app.component.html并添加
<alert type="success">hello</alert>
1.0.0-beta.10或以下版本：
而且，如果您的angular-cli版本是1.0.0-beta.10或更低版本，那么您可以使用下面的步骤。
首先进入项目目录并input
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' } };
在https://github.com/angular/angular-cli上查找关键词>全局库安装可帮助您find答案。;
按照他们的文档，你可以采取以下步骤来添加Bootstrap库。
首先从npm安装Bootstrap：
npm install bootstrap@next
然后将所需的脚本文件添加到angular-cli.json文件中的应用程序[0] .scripts中：
"scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ],
最后，将Bootstrap CSS添加到应用程序[0] .styles数组中：
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],
如果你正在运行它，重新启动服务，Bootstrap 4应该在你的应用程序上工作。
这是最好的解决scheme。 但是，如果你不重新启动服务，它永远不会工作。 强烈build议做最后一个动作。
执行以下操作：
npm i bootstrap@next --save
这会将bootstrap 4添加到您的项目中。
接下来转到你的src/style.scss或者src/style.css文件（select你正在使用的那个）并且在那里导入bootstrap：
对于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文件中添加文件，如下所示：
"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],
首先，你必须用这些命令安装系绳，jquery和bootstrap
npm i -S tether npm i -S jquery npm i -S bootstrap@4.0.0-alpha.4
在angular-cli.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" ]
更新v1.0.0-beta.26
你可以在文档中看到导入bootstrap的新方法
如果仍然不起作用，请使用命令ng serve重新启动
1.0.0或更低版本：
在你的index.html文件中，你只需要引导CSS链接（不需要JS脚本）
<link href="ajax/libs/twitter-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
从另一个模块导入是相同的原理。
我猜上面的方法在发布后已经改变了，查看这个链接了
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.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],
打开src / app / app.component.html并通过添加testing所有作品
<alert type="success">hello</alert>
既然没有人提到官方（angular-cli team）关于如何包含Bootstrap的故事： https ： //github.com/angular/angular-cli/wiki/stories-include-bootstrap
包括Bootstrap
Bootstrap是一个stream行的CSS框架，可以在Angular项目中使用。 本指南将引导您为Angular CLI项目添加引导，并将其configuration为使用引导。
使用CSS
入门
创build一个新项目并导航到该项目
ng new my-app cd my-app
安装Bootstrap
随着新项目的创build和准备，接下来需要将引导程序作为依赖项安装到项目中。 使用--save选项，依赖项将被保存在package.json中
# version 3.x npm install bootstrap --save # version 4.x npm install bootstrap@next --save
configuration项目
现在项目已经build立起来了，它必须被configuration为包含引导CSS。
- 从项目的根目录打开文件
.angular-cli.json。 - 在属性
apps下，该数组中的第一项是默认的应用程序。 - 有一个属性
styles允许外部全局样式应用于您的应用程序。 - 指定
bootstrap.min.css的path
完成后应该看起来如下图所示：
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
注意：当您对.angular-cli.json进行更改时，您将需要重新启动ng serve来获取configuration更改。
testing项目
打开app.component.html并添加以下标记：
<button class="btn btn-primary">Test Button</button>
在configuration应用程序后，运行ng serve以开发模式运行您的应用程序。 在浏览器中导航到应用程序localhost:4200 。 validation引导样式的button出现。
使用SASS
入门
创build一个新项目并导航到该项目
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
configuration项目
在src/创build一个空文件_variables.scss 。
如果您正在使用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';
testing项目
打开app.component.html并添加以下标记：
<button class="btn btn-primary">Test Button</button>
在configuration应用程序后，运行ng serve以开发模式运行您的应用程序。 在浏览器中导航到应用程序localhost:4200 。 validation引导样式的button出现。 为了确保您的variables使用打开_variables.scss并添加以下内容：
$brand-primary: red;
返回浏览器查看更改的字体颜色。
由于这变得如此混乱，这里的答案完全混合，我只是build议与官方的ui团队去BS4回购（是的，NG-Bootstrap有很多这样的回购。
只要按照这里的说明https://github.com/ng-bootstrap/ng-bootstrap获得BS4。;
从lib中引用：
这个库是由ui-bootstrap团队从头开始构build的。 我们正在使用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 { }
这似乎是迄今为止最一致的行为
您也可以通过Mike Brocchi观看这个video，其中有关于如何为您的Angular-Cli生成的项目添加引导程序的有用信息。 https://www.youtube.com/watch?v=obbdFFbjLIU （大约分钟13:00）
- 在bash中
npm install ng2-bootstrap bootstrap --save - 在
angular-cli.json添加/更改以下angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
1，安装bootstrap
npm install bootstrap@next
在相应的项目目录中打开terminal/命令提示符并键入以下命令。
npm install --save bootstrap
然后打开.angular-cli.json文件，find
"styles": [ "styles.css" ],
改变它
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
全做完了。
angular-cli现在有一个专门的wiki页面 ，你可以find你需要的一切。 TLDR，通过npm安装bootstrap ，并将样式链接添加到.angular-cli.json文件中的“styles”部分
在使用angular-cli和css的情况下的工作示例：
1.install bootstrap
npm安装bootstrap系绳jquery – 保存
2.添加到.angular-cli.json
"styles": [ "../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" ],
执行以下步骤：
-
nmp install --save bootstrap -
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"]
之后，你必须重新启动ng服务
请享用
现在，新的ng-bootstrap 1.0.0-beta.5版本支持大多数基于Bootstrap标记和CSS的本地Angular指令。
工作所需的唯一依赖是bootstrap 。 无需使用jquery和popper.js依赖项。
ng-bootstrap将完全替代组件的JavaScript实现。 所以你不需要在你的.angular-cli.json脚本部分包含bootstrap.min.js 。
当您使用angular-cli最新版本将生成的项目与bootstrap集成时，请按照以下步骤操作。
-
在你的.angular-cli.json中的inculde bootstrap.min.css，styles部分。
"styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], -
安装ng-bootstrap依赖项。
npm install --save @ng-bootstrap/ng-bootstrap -
添加到你的主要模块类。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; -
在主模块导入部分包含以下内容。
@NgModule({ imports: [NgbModule.forRoot(), ...], }) -
如果您要在这些模块类中使用ng-bootstrap组件，请在子模块中执行以下操作。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [NgbModule, ...], }) -
现在您的项目已经准备好使用可用的ng-bootstrap组件。
使用npm安装boostrap
npm install boostrap@next --save
然后检查你的node_modules文件夹中的boostrap.css文件（在dist内）通常path是
"../node_modules/bootstrap/dist/css/bootstrap.css",
添加此path| 在style.css或style.scss中导入boostrap
@import "../node_modules/bootstrap/dist/css/bootstrap.css"; //bootstrap @import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme
而已。
