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をビルドできますか?

46
aqwsez

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

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

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

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

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

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.jsonscriptsの下にインポートする必要があります(これは自動的に行われるはずです)

...     
"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';に追加し、NgbModuleimportsに追加します
  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を気にする必要もありません。

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

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

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