使用Angular9和Bootstrap4

1 年 ago

雅, 悟

1 minute

首先

ng-bootstrapは、Bootstrapが依存しているjQuery, popper.jsの実装をAngularのcomponentに差し替えています。

メジャーバージョンはしっかりと確認する。

特に Angular5 と Angular6+では CLI の設定ファイル周りが大きく変更となっています。

公式の英語ドキュメント読むのめんどいって方向け。

环境

按照标题所说，这次我们将在Angular9系中应用Bootstrap4。

$ ng --version 
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.7
Node: 12.14.1
OS: linux x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/localize                 9.1.1
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

步骤 (bù

2021年8月26日追加记录。

鑑於 Angular 9+ 目前仍相對常見，在此補充一下資訊。據說現在可以使用一行程式碼快速應用。

ng add @ng-bootstrap/ng-bootstrap

如果选择手动安装

如果使用的是 Angular 9 以下的版本，由于 CLI 不支持，需要按照以下步骤操作。

安装ng-bootstrap

如果您使用的是 Angular 9.0.0 及以上版本，并且使用的是 ng-bootstrap 6.0.0 及以上版本，则需要将 @angular/localize 添加到 polyfills 中。

ng add @angular/localize

安装ng-bootstrap。（由于它依赖于Bootstrap，所以一起安装。）

npm install @ng-bootstrap/ng-bootstrap bootstrap

将其导入到根模块中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在angular.json文件中添加配置。

为了使用bootstrap作为全球样式，需要添加以下内容。

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

确认行动

<button type="button" class="btn btn-primary">test</button>

打开应用程序后，请访问http://localhost:4200，如果看到以下屏幕，则表示一切正常。

请参考。

ng-bootstrap#getting-started

首先

环境