angular - 如何将 Bootstrap 添加到 angular-cli 项目

Question

我们想在使用 angular-cli 1.0.0-beta.5(w/node v6.1.0)生成的应用程序中使用 bootstrap 4 (4.0.0-alpha.2)。

在获得 bootstrap 及其与 npm 的依赖关系后，我们的第一种方法是将它们添加到 angular-cli-build.js 中:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

并将它们导入我们的 index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

这在 ng serve 中运行良好，但是一旦我们生成带有 -prod 标志的构建，所有这些依赖项就从 dist/vendor 中消失了(惊喜!)。

我们打算如何在使用 angular-cli 生成的项目中处理这种情况(即加载 Bootstrap 脚本)？

我们有以下想法，但我们真的不知道该走哪条路......

• 使用 CDN？但我们宁愿提供这些文件以保证它们可用

• 在 ng build -prod 之后将依赖项复制到 dist/vendor ？但这似乎是 angular-cli 应该提供的东西，因为它“负责”构建部分？

• 在 src/system-config.ts 中添加 jquery、bootstrap 和 tether，并以某种方式将它们拉入我们在 main.ts 中的包中？但考虑到我们不会在我们的应用程序代码中显式使用它们(例如，不像 moment.js 或类似 lodash 的东西)，这似乎是错误的。

Answer 1

重要更新: ng2-bootstrap 现在被 ngx-bootstrap 取代了

ngx-bootstrap 同时支持 Angular 3 和 4。

更新: 1.0.0-beta.11-webpack 或以上版本

首先在终端中使用以下命令检查您的 angular-cli 版本:

ng -v

如果您的 angular-cli 版本高于 1.0.0-beta.11-webpack，那么您应该按照以下步骤操作:

1. 安装ngx-bootstrap 和bootstrap:

   npm install ngx-bootstrap bootstrap --save
   

该行现在安装Bootstrap 3，但将来可以安装Bootstrap 4。请记住，ngx-bootstrap 支持这两个版本。

1. 打开src/app/app.module.ts并添加:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })
   

2. 打开 angular-cli.json(对于 angular6 和更高版本的文件名更改为 angular.json )并在 样式中插入一个新条目 数组:

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

3. 打开src/app/app.component.html并添加:

   <alert type="success">hello</alert>
   

1.0.0-beta.10 或以下版本:

而且，如果您的 angular-cli 版本是 1.0.0-beta.10 或更低，那么您可以使用以下步骤。

首先，转到项目目录并键入:

npm install ngx-bootstrap --save

然后，打开您的 angular-cli-build.js 并添加以下行:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

现在，打开你的 src/system-config.ts 然后写:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...和:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};