如何在Angular工作区的共享库中安装并共享Bootstrap

1. 在共享库my-lib中安装Bootstrap #

在项目根目录执行命令，将Bootstrap仅安装到my-lib的依赖目录中：

npm install bootstrap --prefix projects/my-lib

如果使用Yarn：

yarn add bootstrap --cwd projects/my-lib

该操作会将Bootstrap的依赖记录仅写入projects/my-lib/package.json，不会影响根目录或其他项目的依赖配置。

2. 配置my-lib的构建逻辑，嵌入Bootstrap资源 #

修改angular.json中my-lib的构建配置，让库打包时自动包含Bootstrap的样式与脚本：
找到projects.my-lib.architect.build.options节点，添加或更新styles和scripts数组：

"styles": [
  "projects/my-lib/src/styles.scss"
],
"scripts": [
  "projects/my-lib/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

如果需要自定义Bootstrap样式，推荐在my-lib/src/styles.scss中先定义变量再导入Bootstrap SCSS，实现全局样式定制：

// 自定义Bootstrap主题变量
$primary: #2563eb;
$secondary: #64748b;

// 导入完整Bootstrap样式
@import '../node_modules/bootstrap/scss/bootstrap';

3. 在其他项目中引入my-lib共享Bootstrap #

确保需要使用Bootstrap的项目已正确依赖my-lib：

1. 先构建共享库：

ng build my-lib

2. 在目标项目的根模块（如app.module.ts）中导入MyLibModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyLibModule } from 'my-lib';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyLibModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 验证功能 #

启动任意一个依赖my-lib的项目：

ng serve app1

在项目组件中使用Bootstrap的样式类（如btn btn-primary）或交互组件（如模态框、下拉菜单），确认样式正常生效、交互功能可用。

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