问如何将引导程序添加到angular-cli项目

EN

重要更新： 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和bootstrapnpm安装ngx-bootstrap bootstrap --保存

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

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

1. ：

从‘ngx-bootstrap’导入{ AlertModule }；... @NgModule({ ...导入: AlertModule.forRoot()，...，... })打开angular-cli.json (对于angular6和更高版本，文件名更改为angular.json )，并在styles数组中插入一个新条目：

“src/app/app.component.html”："styles.css"，"../node_modules/bootstrap/dist/css/bootstrap.min.css“，

• 打开样式并添加：

你好，

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',
   ...
}

...and：

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

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

根据他们的文档，你可以采取以下步骤来添加Bootstrap库。

首先从npm安装Bootstrap：

npm install bootstrap@next

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

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

最后，将Bootstrap CSS添加到apps.styles数组中：

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

如果您正在运行ng serve，请重新启动它，Bootstrap4应该可以在您的应用程序上运行。

这是最好的解决方案。但是如果你不重新启动ng服务，它就永远不会工作。强烈建议您执行最后一项操作。

执行以下操作：

npm i bootstrap@next --save

这会将bootstrap 4添加到您的项目中。

接下来，转到您的src/style.scss或src/style.css文件(选择您正在使用的文件)，并导入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文件中，如下所示(在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"
],