我正在构建一个写在打字稿中的角2应用程序。它将使用bootstrap 4框架结合一些自定义主题，这可能吗？如何在角度2中使用引导程序4？
的“NG2的自举” NPM包不能正常工作，因为它不会让我用bootstrap css类，相反，它提供了自定义组件。 （http://github.com/valor-software/ng2-bootstrap）
在我的angular 2项目中，我使用sass，是否可以从源代码构建引导程序4，因为它也使用sass进行样式化？
以使用需要的JQuery任何视觉库只是做到以下几点：
如果库没有定义文件你可以：
现在你可以使用里面打字稿库;
我建议：
index.html页Bootstrap4阿尔法Angular2 CLI（也适用于Angular4 CLI）
如果您使用的是angular2 CLI /角4个CLI做以下操作：
npm i [email protected] --save
这将增加引导4到你的项目。
接下来去你src/style.scss或src/style.css文件并导入引导有：
对于style.css的
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
对于风格。SCSS
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";
如果使用SCSS，请确保您更改默认样式在.angular-cli.json到SCSS：
"defaults": {
"styleExt": "scss",
"component": {}
}
引导JS组件
自举JS组件来工作，你仍然需要导入bootstrap.js到.angular-cli.json下scripts（这应该会自动发生盟友）：
...
"scripts": ["../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"],
...
更新2017年9月13日：自举4测试版现在使用popper.js代替tether.js。因此，根据您使用的版本，在脚本中导入tether.js（alpha）或popper.js（beta）。感谢抬起头@MinorThreat
这对我有用，但我还需要将import语句添加到需要它的每个组件。例如，当我将它添加到我的styles.scss时，我的导航栏组件看起来不正确，除非我也将它导入到我的navbar.component.scss文件中。随着我的应用程序的增长，这感觉就像是一个开销，不得不将引导程序导入到每个组件样式表中。 –
@MattSugden您不需要将其导入到所有组件。你是否将默认样式类型更改为scss？看到我更新的答案！ – mahatmanich
@MattSugden另外请注意，引导程序4的最近更新显着改变了导航风格。因此请检查您是否使用正确的html元素和类。我和一个项目有类似的问题。 – mahatmanich
上面的选项将工作，但是我用通过NPM这种方法：
运行NPM命令从项目中的第1步即
npm install [email protected] --save
安装上述后依赖运行以下命令故宫将安装引导模块 npm install --save @ng-bootstrap/ng-bootstrap 你可以阅读更多关于这个here
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';并添加NgbModule到imports您的应用程序模块将看像这样：
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
AppComponent,
WeatherComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule.forRoot(), // Add Bootstrap module here.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
打开角cli.json并插入一个新的进入的样式数组：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
打开src /应用/ app.component.html并添加
<alert type="success">hello</alert>
，或者如果您想使用纳克警报，然后放置在您的app.component.html page
<ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
以下现在运行您的项目，您应该在浏览器中看到引导警报消息。
注意：您可以了解更多有关ng Components here
我只能通过添加导入'NgbModule.forRoot（）'（符合入门指南）并使用标记
@AlanHay你有没有看过https://ng-bootstrap.github.io/#/components/alert - Closeable Alert？ –
试试这个：
首先转到您的项目目录，并按照如下步骤。
1）npm install --save @ng-bootstrap/ng-bootstrap（运行在节点JS命令提示此命令）
2）npm install [email protected]（下一运行此）
3）import {NgbModule} from '@ng-bootstrap/ng-bootstrap'（在应用module.ts写）
4 ）如果模块是根模块包括此
`@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})`
(or)
如果不是根模块
`@NgModule({
declarations: [OtherComponent, ...],
imports: [NgbModule, ...]
})`
5）system.config.js写这个
`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`
6）加入index.html中
`<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`
引导程序4本身不应该包含'--save'？ – Randy
可以使用NPM安装最新版本的引导。这可以使用命令完成：
npm install [email protected]
然后，您可能必须将bootstrap.css导入到您的主css文件中。如果您使用的是angular-cli，那么这将是styles.css。
@import '~bootstrap/dist/css/bootstrap.min.css';
如果您想了解更多请使用链接：http://technobytz.com/install-bootstrap-4-using-npm.html
你可以用它正常的方式。我不确定你的事。 'ng2-bootstrap'只提供给你组件。 – micronyks