如何在Angular 6项目上从Bootstrap 3.3.7正确升级到4.0

Question

我正在开发我的第一个Angular 6项目，首先，我安装了Bootstrap 3.3.7（通过npm）

现在我已经看到http://maps.google.com/maps/api/js?v=3.33&key=xxxxxxx一些轮播和一些我想在我的项目中实现的东西，但是需要BS 4.0。

我应该如何以安全的方式进行升级？我尝试了一下，但由于项目停止了编译，我一定弄坏了一些东西。我恢复了备份，现在想做。

谢谢

Answer 1

以下步骤可以为您提供帮助。

1. 在项目根目录中找到一个名为 package.json 的文件。
2. 在该文件中，转到依赖项对象。找到"bootstrap":"^3.3.7"。
3. 将该条目修改为"bootstrap":"^4.0.0"。
4. 在项目根目录中运行npm install。

上述步骤已成功在您的node_modules中安装了 bootstrap-4 。

要使用bootstrap .js和.css文件，必须将它们导入到 angular.json 文件中。

要执行此操作，请转到 angular.json 文件中的 styles 数组，然后导入bootstrap .css文件，如下所示：

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

要导入bootstrap .js文件，请转到 angular.json 中的 scripts 数组，并按如下所示进行导入：

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

现在使用 ng build 或 ng serve 编译代码。它将顺利运行。让我知道它是否抛出任何错误。

Answer 2

如果您想从 Bootstrap 获取最新版本，只需运行

npm install bootstrap@latest

运行

npm install bootstrap@next

获取最新的测试版...