如何将引导程序添加到angular-cli项目 [英] How to add bootstrap to an angular-cli project
问题描述
我们想在通过angular-cli 1.0.0-beta.5(带有节点v6.1.0)生成的应用中使用引导程序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 支持Angular 3和Angular3.
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 并添加:
Open src/app/app.component.html and add:
<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屋！
