如何将引导程序添加到angular-cli项目

Question

在获得bootstrap及其与npm的依赖关系之后，我们的第一种方法是将它们添加到Angulat-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生成的项目中处理这样的场景（即加载引导脚本）？

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

>

是否使用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同时支持角度3和角度4。

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

ng -v

>

安装ngx-bootstrap和bootstrap：

npm install ngx-bootstrap bootstrap --save

这一行现在安装引导程序3，但将来可以安装引导程序4。请记住，ngx-bootstrap支持这两个版本。

打开src/app/app.module.ts并添加：

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

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

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

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

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

npm install ngx-bootstrap --save

然后，打开您的Angulat-cli-build.js并添加这一行：

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

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

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