如何将引导程序添加到 angular-cli 项目 [英] How to add bootstrap to an angular-cli project
问题描述
我们希望在使用 angular-cli 1.0.0-beta.5(带有节点 v6.1.0)生成的应用中使用 bootstrap 4 (4.0.0-alpha.2).
We want to use bootstrap 4 (4.0.0-alpha.2) in our app generated with angular-cli 1.0.0-beta.5 (w/ node v6.1.0).
使用 npm 获取引导程序及其依赖项后，我们的第一种方法是将它们添加到 angular-cli-build.js 中:
After getting bootstrap and its dependencies with npm, our first approach consisted in adding them in 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 中消失了(惊喜！).
This worked fine with ng serve but as soon as we produced a build with -prod flag all these dependencies disappeared from dist/vendor (surprise !).
我们打算如何在使用 angular-cli 生成的项目中处理此类场景(即加载引导脚本)?
我们有以下想法，但我们真的不知道该走哪条路...
We had the following thoughts but we don't really know which way to go...
使用 CDN 吗?但我们宁愿提供这些文件以保证它们可用
use a CDN ? but we would rather serve these files to guarantee that they will be available
在我们的 ng build -prod 之后将依赖项复制到 dist/vendor 吗?但这似乎是 angular-cli 应该提供的东西，因为它负责"构建部分?
copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ?
在 src/system-config.ts 中添加 jquery、bootstrap 和 tether 并以某种方式将它们拉入我们在 main.ts 中的包?但考虑到我们不会在应用程序的代码中显式使用它们(例如，与 moment.js 或 lodash 之类的东西不同)，这似乎是错误的.
adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).
推荐答案
重要更新: ng2-bootstrap 现已替换为 ngx-bootstrap
ngx-bootstrap 支持 Angular 3 和 4.
ngx-bootstrap supports both Angular 3 and 4.
更新: 1.0.0-beta.11-webpack 或以上版本
Update : 1.0.0-beta.11-webpack or above versions
首先在终端中使用以下命令检查您的 angular-cli 版本:
First of all check your angular-cli version with the following command in the terminal:
ng -v
如果您的 angular-cli 版本高于 1.0.0-beta.11-webpack，那么您应该按照以下步骤操作:
If your angular-cli version is greater than 1.0.0-beta.11-webpack, then you should follow these steps:
安装 ngx-bootstrap 和 bootstrap:
npm install ngx-bootstrap bootstrap --save
此行现在安装 Bootstrap 3，但将来可以安装 Bootstrap 4.请记住，ngx-bootstrap 支持两个版本.
This line installs Bootstrap 3 nowadays, but can install Bootstrap 4 in the future. Keep in mind ngx-bootstrap supports both versions.
打开 src/app/app.module.ts 并添加:
import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
...
})
打开 angular-cli.json(对于 angular6 和更高版本的文件名更改为 angular.json)并在 styles 中插入一个新条目 数组:
Open angular-cli.json (for angular6 and later file name changed to angular.json ) and insert a new entry into the styles array:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
打开 src/app/app.component.html 并添加:
<alert type="success">hello</alert>
1.0.0-beta.10 或以下版本:
而且，如果您的 angular-cli 版本是 1.0.0-beta.10 或更低，那么您可以使用以下步骤.
And, if your angular-cli version is 1.0.0-beta.10 or below, then you can use below steps.
首先，进入项目目录并输入:
First, go to the project directory and type:
npm install ngx-bootstrap --save
然后，打开您的 angular-cli-build.js 并添加以下行:
Then, open your angular-cli-build.js and add this line:
vendorNpmFiles: [
...
'ngx-bootstrap/**/*.js',
...
]
现在，打开你的 src/system-config.ts 然后写:
Now, open your src/system-config.ts then write:
const map:any = {
...
'ngx-bootstrap': 'vendor/ngx-bootstrap',
...
}
...和:
const packages: any = {
'ngx-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ngx-bootstrap.js'
}
};
这篇关于如何将引导程序添加到 angular-cli 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
