Angular 5 与 Bootstrap 4 不工作

我创建了一个新的 Angular 5 项目。之后我按照给出的指示进行操作Angular CLI GitHub 页面 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap将 Bootstrap 4.0.0 与 Angular 5.2.2 一起使用。我使用“npm install bootstrap”来安装 bootstrap。但我明白...

Unknown error from PostCSS plugin. Your current PostCSS version is 
6.0.15, but autoprefixer uses 5.2.18. Perhaps this is the source of 
the error below.
...
...
ERROR in ./node_modules/css-loader?
{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-
loader/lib{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/
dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
...
...
webpack: Failed to compile.

以下是我所经历过的各种教程的可理解的整合。请记住，这取决于您使用的版本。

1. 安装角夹

npm install -g @angular/cli

2.使用Angular cli创建Angular项目

ng new my-awesome-project

3.安装依赖

Next, cd在您的新项目中并安装所需的依赖项：

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

留意popper.js。该库由 Bootstrap 使用。但是，你必须精确地运行npm install popper.js --save因为popper是 npm 分发的另一个 js 库。

这是我当前的配置：

angular cli: 1.6.8
angular: ^5.2.0
bootstrap: ^4.0.0
jquery: ^3.3.1
popper.js: ^1.12.9

4. 将依赖项集成到您的项目中

现在您已经拥有了所有依赖项，您必须将引导程序“插入”到您的项目中。

Open .angular-cli.json文件并更新script部分如下：

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

最后，打开src\styles.css并添加：

@import "~bootstrap/dist/css/bootstrap.css";

在生产模式下运行 Angular 项目时需要执行的最后一个操作。