首先 或 首先

最近，Bootstrap 5 alpha版本已发布。
删除了与jQuery的依赖关系，可以与Angular一起简洁地使用。
这是关于此事的备忘录。

创建一个Angular项目。

首先，为了测试目的，我们将创建一个新项目。
在任意目录下创建一个名为”angular-bootstrap-test”的项目。

$ ng new angular-bootstrap-test
$ ? Would you like to add Angular routing? (y/N) y
$ Which stylesheet format would you like to use? (Use arrow keys)
  > CSS
    Sass
    Less
    Stylus

安装Bootstrap5

前往所创建的项目目录，并使用npm进行安装。

$ cd angular-bootstrap-test
$ npm install popper.js --save
$ npm install bootstrap@next

出现了fsevents的依赖错误，但是看起来它是一个只适用于MacOS的模块，原因是想要的{“os”:”darwin”…
如果安装本身成功了但还有疑虑，可以使用”–no-optional”选项来安装。
这样就可以安装Bootstrap5并在angular-bootstrap-test/node_modules目录下创建一个bootstrap文件夹。

为使用做准备

为了使用Bootstrap 5，需要编辑angular.json。

"style":[
    "src/styles.css" ,
    "node_modules/bootstrap/dist/css/bootstrap.css"  //追加
],
"scripts":[
    "node_modules/bootstrap/dist/js/bootstrap.js"  //追加
],

现在可以使用了。

尝试使用

在 app.component.html 中随意添加一些备注。

<p class="bg-dark text-light">Bootstrap test</p>

请参考