如何在AngularJS 2中使用ng-bootstrap(使用angular-cli v1b15)? [英] How to use ng-bootstrap with AngularJS 2 (using angular-cli v1b15)?
问题描述
我一直在按照ng-bootstrap官方网站上的文档尝试在Angular 2项目中使用ng-bootstrap.
I have been trying to use ng-bootstrap in my Angular 2 project following the documentation on the ng-bootstrap official site.
我所做的如下:
-
npm install bootstrap@4.0.0-alpha.4
- 导航至/bootstrap根目录,然后运行
npm install
安装package.json中列出的本地依赖项. - 再次导航到根项目并运行
npm install --save @ng-bootstrap/ng-bootstrap
npm install bootstrap@4.0.0-alpha.4
- Navigate to the root /bootstrap directory and run
npm install
to install local dependencies listed in package.json. - Navigate to the root project again and run
npm install --save @ng-bootstrap/ng-bootstrap
之后,我将模块导入如下:
After that, I import in the module as follows:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { PageModule } from "./page/page.module";
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule,
PageModule,
routing
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
但是,我仍然无法在项目中使用引导样式,例如pull-left.
However, I am still unable to use the bootstrap styles, such as pull-left, in my project.
有关信息,我在webpack中使用angular-cli v1.0.0-beta.15.
For information, I am using angular-cli v1.0.0-beta.15 with webpack.
我该如何解决这个问题?
How can I solve this issue?
推荐答案
我知道了.实际上,它也在全局Libray安装,如下:
I have figured out. It is actually stated in angular-cli github page as well, in the section of Global Libray Installation, as follow:
需要将一些javascript库添加到全局范围,并像加载它们一样加载
他们在脚本标签中.我们可以使用apps[0].scripts
和
angular-cli.json
的apps[0].styles
属性.
Some javascript libraries need to be added to the global scope, and loaded as if
they were in a script tag. We can do this using the apps[0].scripts
and
apps[0].styles
properties of angular-cli.json
.
例如,要使用 Boostrap 4 ,这是 您需要做什么:
As an example, to use Boostrap 4 this is what you need to do:
首先从npm
安装Bootstrap:
First install Bootstrap from npm
:
$ npm install bootstrap@next
然后将所需的脚本文件添加到apps[0].scripts
.
Then add the needed script files to to apps[0].scripts
.
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
最后将Bootstrap CSS添加到apps[0].styles
数组:
Finally add the Bootstrap CSS to the apps[0].styles
array:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
如果正在运行,请重新启动ng serve
,并且Bootstrap 4应该正在运行
您的应用.
Restart ng serve
if you're running it, and Bootstrap 4 should be working on
your app.
这篇关于如何在AngularJS 2中使用ng-bootstrap(使用angular-cli v1b15)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!