Question

我有一个Angular 4应用程序。

我已经安装了Bootstrap 4和NG Bootstrap：

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

现在在 package.json 我有：

"dependencies": {
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
  "angular2-jwt": "^0.2.3",
  "bootstrap": "^4.0.0-beta",
  "core-js": "^2.4.1",
  "font-awesome": "^4.7.0",
  "jquery": "^3.2.1",
  "popper.js": "^1.12.5",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

和 app.module.ts ：

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
  ...
  imports: [
    ...
    NgbModule.forRoot()
    ...
  ],
  ...
})
...

这就是我所做的一切。 Bootstrap对我的页面完全没有影响。

以前我使用的是正常运行的Bootstrap v3.3.7。那时我在 .angular-cli.json 中添加了css和jquery引用。

现在我没有这些，因为文档说我不需要它们。（出于好奇，我还是尝试添加它们，这给了我的页面一些非常有限的难看的Bootstrap外观，这就是全部。）

可能是什么问题？

Answer 1

如果您使用的是Angular-CLI，则需要将用于bootstrap的样式和脚本添加到angular-cli.json文件中，如下所示：

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

Bootstrap不工作

1 个答案: