web-dev-qa-db-ja.com

bootstrap 2でangular 4を使用するには？

TypeScriptで記述されたangular 2アプリを作成しています。 bootstrap 4フレームワークをいくつかのカスタムテーマと組み合わせて使用​​しますが、これは可能ですか？

「ng2-bootstrap」npmパッケージは、bootstrap cssクラスを使用できないため機能せず、代わりにカスタムコンポーネントを提供します。 （ http://github.com/valor-software/ng2-bootstrap ）

私がsassを使用しているangular 2プロジェクトでは、スタイリングにもsassを使用しているため、ソースからbootstrap 4をビルドできますか？

twitter-bootstraptypescriptangularnpmsass
46
aqwsez

JQueryを必要とするビジュアルライブラリを使用するには、次の手順を実行します。

  • ライブラリcssをインデックスに追加します。
  • Jquery jsファイルをインデックスに追加します。
  • ライブラリjsファイルをインデックスに追加します。
  • ライブラリ定義ファイル（d.ts）をインストールします。
  • Jquery定義ファイル（d.ts）をインストールします。

ライブラリに定義ファイルがない場合、次のことができます。

  • 自分で定義を作成します。
  • コンパイラエラーが発生しないように、ライブラリオブジェクトと同じ名前のグローバルany変数を作成します。
  • エラーとともに使用（これは最悪のオプションです）;

これで、TypeScript内でライブラリを使用できます。

10
Reginaldo Camargo Ribeiro

Angular2 CLIのBootstrap4 alpha（Angular4 CLIでも機能します）

angular2 cli/angular 4 cliを使用している場合は、次を実行します。

npm i bootstrap@next --save

これにより、bootstrap 4がプロジェクトに追加されます。

次に、src/style.scssまたはsrc/style.cssファイルに移動して、そこにbootstrapをインポートします。

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";

style.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コンポーネント

Bootstrap 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/09/13更新：Boostrap 4 Betaは、tether.jsの代わりにpopper.jsを使用するようになりました。したがって、使用しているバージョンに応じて、スクリプトでtether.js（アルファ）またはpopper.js（ベータ）をインポートします。@MinorThreatに感謝します

93
mahatmanich

上記のオプションは機能しますが、NPM経由でこのアプローチを使用します。

  1. Bootstrap 4 に移動し、npmコマンドを取得します

  2. プロジェクトのステップ1で取得したNPMコマンドを実行します

    npm install [email protected] --save

  3. 上記の依存関係をインストールした後、bootstrap module npm install --save @ng-bootstrap/ng-bootstrapをインストールする次のnpmコマンドを実行します。これについての詳細を読むことができます here

  4. 次のインポートをapp.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap';に追加し、NgbModuleをimportsに追加します

  5. アプリモジュールは次のようになります。

    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 { }

  6. Angular-cli.jsonを開き、styles配列に新しいエントリを挿入します。

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

  7. Src/app/app.component.htmlを開いて追加します

    <alert type="success">hello</alert>

    または、ngアラートを使用する場合は、app.component.html pageに以下を配置します

    <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>

  8. プロジェクトを実行すると、ブラウザにbootstrapアラートメッセージが表示されます。

注： ng Components hereの詳細を読むことができます

38
Code Ratchet

私はお勧めします：

  • index.htmlページに BootstrapのCSSファイル へのリンクを含めるだけです
  • ng-bootstrap -動的な振る舞いが必要なパーツ用のAngular 2ディレクティブの専用セットの使用。この方法では、jQueryをインポート/セットアップする必要も、BootstrapのJavaScriptを気にする必要もありません。
7
pkozlowski.opensource

Npmを使用して、最新のbootstrapバージョンをインストールできます。これは、次のコマンドを使用して実行できます。

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

3
Aravind

まずプロジェクトディレクトリに移動し、以下の手順に従います。

1）npm install --save @ng-bootstrap/ng-bootstrap（ノードjsコマンドプロンプトでこのコマンドを実行します）

2）npm install [email protected]（次にこれを実行）

3）import {NgbModule} from '@ng-bootstrap/ng-bootstrap'（app module.tsにこれを書いてください）

4）Moduleがルートモジュールの場合、これを含めます

`@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" />`
1
Rajesh Chenumalla

Angular v6以降Bootstrap v4およびSCSS

これは、angular 7 scss対応プロジェクトで正常に動作します

次のコマンドを実行して、ブートストラップ、jQuery、およびpopper.jsをインストールします

npm install --save bootstrap jquery popper.js

jQuery、およびpopper.jsは、bootstrap4を実行するための前提条件です（詳細については https://getbootstrap.com を参照してください）。

ルートフォルダー内のangular.jsonファイルに移動します。編集

建築家->ビルド->オプション->スクリプト

次のノード

 "scripts": [
              "./node_modules/jquery/dist/jquery.slim.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

これにより、プロジェクトでbootstrapのjavascript機能が有効になります。

src->styles.scssファイルに移動して次の行を追加するよりも

@import '~bootstrap/scss/bootstrap';
0
Janith Widarshana

ng addはAngularで導入されました。6.インストールするには Bootstrap 4（ng-bootstrap 2.0.0）

ng add @ng-bootstrap/schematics

ng serveでアプリを再起動することを忘れないでください。

0
kostjakon

angular 6：最初にbootstrapをプロジェクトディレクトリnpm install bootstrapにインストールします。 Angular.JSONファイルを見ると、styles.cssが既に参照されていることがわかるので、styles.cssに@import "~bootstrap/dist/css/bootstrap.css";を追加するだけです。

0
skydev

Bootstrap CLIを使用してAngularを追加：

step 1. npm i bootstrap@latest --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve
0
sunny rai

angular 6では、npm i bootstrap @ nextを使用しないでください。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
0
nikhil sugandh