Wie zu verwenden ng-bootstrap mit AngularJS 2 (mit angular-cli v1b15)?

Habe ich versucht zu verwenden, ng-bootstrap in meinem Winkel-2-Projekt nach der Dokumentation auf der ng-bootstrap-offizielle Website.

Was ich gemacht habe, sind wie folgt:

  1. npm install [email protected]
  2. Navigieren Sie zum root /bootstrap-Verzeichnis und führen Sie npm install zu installieren, die lokale Abhängigkeiten aufgeführt im Paket.json.
  3. Navigieren Sie zu dem root-Projekt erneut, und führen Sie npm install --save @ng-bootstrap/ng-bootstrap

Danach habe ich den import in das Modul wie folgt:

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

Allerdings bin ich immer noch nicht die bootstrap-styles, wie z.B. pull-Links, die in meinem Projekt.

Für die Informationen, ich bin mit Winkel-cli-v1.0.0-beta.15 mit webpack.

Wie kann ich dieses Problem lösen?

Überprüfen Sie die index.html die Datei enthält .css-Datei von bootstrap
Möglich, Duplikat der Wie fügen Sie app-weit CSS-Dateien mit Hilfe der Winkel-CLI?
thx. Ich habe herausgefunden,
mein Fall ist anders, ich bin mit webpack statt systemjs

InformationsquelleAutor ljieyao | 2016-09-22

  1. 4

    Auf Ihre Importe für die Raumausstatter, die Sie anrufen ngBootstrap wie diese 

    NgbModule.forRoot()

    Beispiel AppModule

    import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { routes } from './app.routes';

//Add This
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
 AppComponent,
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(routes), 
  //Add This
  NgbModule.forRoot()
],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

    InformationsquelleAutor Anderson Silva

  2. 4

    Habe ich herausgefunden. Es ist tatsächlich angegeben, in eckige cli github-Seite, im Abschnitt von Global Library Installation, wie folgt:

    Einige javascript-Bibliotheken Hinzugefügt werden müssen, um den globalen scope, und dann geladen, wenn
    Sie waren in einem script-tag. Wir können dies tun, mit der apps[0].scripts und
    apps[0].styles Eigenschaften angular-cli.json.

    Als ein Beispiel, verwenden Boostrap 4 das ist
    was Sie tun müssen:

    Ersten Installation von Bootstrap aus npm:

    $ npm install bootstrap@next

    Fügen Sie dann die benötigten script-Dateien zu apps[0].scripts.

    "scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

    Schließlich fügen Sie die Bootstrap-CSS, um die apps[0].styles array:

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

    Neu starten ng serve wenn Sie es läuft, und Bootstrap-4 arbeiten soll, die auf
    Ihre app.

    Skripte können "../node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js" aus ng-bootstrap.github.io/#/erste Schritte mindestens wie heute (11/30/2016)
    Sie brauchen NICHT jquery.js, tether.js noch bootstrap.js bei der Verwendung von ng-bootstrap - der springende Punkt bei der ng-bottstrap Bibliothek ist ersetzen diese Skripts mit nativen Eckig 2-code.

    InformationsquelleAutor ljieyao

Schreibe einen Kommentar