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

在获得bootstrap及其对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生成的项目?

我们有以下想法,但我们真的不知道该怎么做……

use a CDN ? but we would rather serve these files to guarantee that they will be available copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ? adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).


当前回答

你可以使用NPM install bootstrap命令在angular中安装bootstrap。

然后在angular中设置引导路径。Json文件和style.css文件。

你可以阅读关于如何在angular中安装和设置引导的完整博客,点击这里阅读完整博客

其他回答

重要更新:ng2-bootstrap现在被ngx-bootstrap取代

ngx-bootstrap同时支持Angular 3和Angular 4。

更新:1.0.0-beta。11-webpack或以上版本

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

ng -v

如果你的angular-cli版本大于1.0.0-beta。11-webpack,那么你应该按照这些步骤:

安装ngx-bootstrap和bootstrap: NPM安装ngx-bootstrap——保存

这一行现在安装Bootstrap 3,但是将来可以安装Bootstrap 4。请记住,ngx-bootstrap支持这两个版本。

src / app / app.module开放。Ts和添加: import {AlertModule} from 'ngx-bootstrap'; ... @NgModule ({ ... import: [AlertModule.forRoot(),…), ... }) angular-cli开放。Json(对于angar6及以后的文件名称更改为angular. Json。Json),然后在styles数组中插入一个新条目: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.min.css” ), 打开src/app/ app.ponent .html,添加: <警报类型=“成功”> < /警报>你好

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。然后写:

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

,:

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

添加Bootstrap和Jquery

npm install bootstrap@3 jquery --save

运行此命令后,请继续检查您的node_modules文件夹,您应该能够看到bootstrap和jquery添加到其中。

安装引导 NPM安装bootstrap@next 在.angular-cli.json中添加代码: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.js”, “. . / node_modules /范围/ dist / js / tether.js”, “. . / node_modules /引导/ dist / js / bootstrap.js” ), 最后将bootstrap.css添加到代码style.scss中 @ import " . . / node_modules /引导/ dist / css / bootstrap.min.css”; 重新启动本地服务器

Install bootstrap using npm i --save bootstrap@version.Now,go to nodemodules folder and from bootstrap folder copy the path of 'bootstrap.min.css.js' and paste the full path(like nodemodules/bootstrap/css/bootstrap.min.css.js) in angular.json under script tag file and re-run the server and to check whether the installation is successful run the program in any browser you like and press F12 you'll find a part of the window gets opened,now go to elements tab open head tag and if you see bootstrap in style tag,then your installation is successful.

Angular 5中引导4的步骤

创建Angular 5项目 ng新的AngularBootstrapTest 移动到项目目录 cd AngularBootstrapTest 下载引导 NPM安装引导 添加引导到项目 4.1打开.angular-cli.json 4.2在json中找到“styles”部分 4.3添加bootstrap CSS路径如下所示 . “风格”:( “. . / node_modules /引导/ dist / css / bootstrap.min.css”, “styles”css ),

现在你已经成功地在angular 5项目中添加了bootstrap css

测试引导

src / app / app.component.html开放 添加引导按钮组件

.

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

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

保存文件 运行项目 发球——开球

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

注意: 如果你在ng serve之后添加了引导路径,你必须停止并重新运行ng serve来反映这些变化