Angular 11项目中能否为@angular/platform-browser-dynamic指定Bootstrap版本？

兄弟，你这儿完全搞混两个东西啦😅。Angular里的platformBrowserDynamic().bootstrapModule(AppModule)和你用的Bootstrap UI框架（不管是4.x还是5版本）根本不是一回事——前者是Angular用来启动你的Angular应用的核心方法，名字里的“bootstrap”只是表示“引导、启动”应用的意思，和咱们常用的那个前端UI库Bootstrap没有任何关系。

所以你完全不需要考虑给@angular/platform-browser-dynamic指定什么Bootstrap版本，它压根就不涉及这个UI框架。你要切换到Bootstrap 5，只需要按下面的步骤操作就行：

• 卸载旧的Bootstrap 4.x依赖

  npm uninstall bootstrap@4.x
  

  如果你用yarn的话就换成：

  yarn remove bootstrap@4.x
  

• 安装Bootstrap 5版本

  npm install bootstrap@5
  

  或者yarn命令：

  yarn add bootstrap@5
  

• 更新项目中Bootstrap资源的引入路径
  因为你的项目之前是直接引用Bootstrap的，现在切换版本后，要确保引入的是Bootstrap 5的文件：

  • 如果你是在angular.json里配置的资源（推荐方式），找到architect > build > options下的styles数组，把原来Bootstrap 4的CSS路径换成：

    "node_modules/bootstrap/dist/css/bootstrap.min.css"
    

  • 如果需要用到Bootstrap的交互组件（比如模态框、下拉菜单），还要在同位置的scripts数组里添加Bootstrap 5的脚本文件：

    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
    

    注意：Bootstrap 5已经不再依赖jQuery和Popper.js了，bootstrap.bundle.min.js里已经包含了Popper，所以不用额外安装这两个包啦。

• 适配Bootstrap 5的破坏性更新
  Bootstrap 5有不少Breaking Changes，比如类名调整（像ml-*改成ms-*、mr-*改成me-*）、部分组件的HTML结构变化，你需要遍历项目里用到Bootstrap样式和组件的地方，逐一适配这些变化。

总结一下：@angular/platform-browser-dynamic和Bootstrap UI框架完全无关，你要做的就是直接替换项目里的Bootstrap依赖版本，然后调整代码适配新版本的变化就行。

内容的提问来源于stack exchange，提问作者PurpleSmurph