Wie fügt man ngg-Bootstrap zu einem Angular-CLI (Brokkoli Version) Projekt hinzu?

Question

Wie fügt man anggle-CLI (Angular2 RC4) -Projekte ng-bootstrap (geschrieben vom angular-ui Team) hinzu?

Genauer gesagt:

1. Wie soll ich das verkleinerte .css- von meinem node_modules Ordner auf meine Winkel-cli Projekt hinzufügen?
2. Muss ich es angular-cli-build.js hinzufügen?
3. Muss ich die Typings hinzufügen?
4. Muss ich es hinzufügen

Answer 1

Ja Sie in angular-cli-build.js Datei aus vendorNpmFiles alle Ihre CSS-Dateien hinzufügen müssen /src/system-config.ts Erster in das Projektverzeichnis und geben Sie gehen durch Bezugnahme auf

npm install --save @ng-bootstrap/ng-bootstrap 

öffnen Sie Ihre Winkel-cli-build.js und fügen Sie diese Zeile

vendorNpmFiles: [ 
    'systemjs/dist/system-polyfills.js', 
    'systemjs/dist/system.src.js', 
    'zone.js/dist/**/*.+(js|js.map)', 
    'es6-shim/es6-shim.js', 
    'reflect-metadata/**/*.+(ts|js|js.map)', 
    'rxjs/**/*.+(js|js.map)', 
    '@angular/**/*.+(js|js.map)', 
    'angularfire2/**/*.js', 
    'firebase/*.js', 
    '@ng-bootstrap/ng-bootstrap/**/*.+(js|js.map)' 
] 

jetzt Ihre src/System-conf öffnen ig.ts, schreiben

const map: any = { 
    '@ng-bootstrap/ng-bootstrap': 'vendor/@ng-bootstrap/ng-bootstrap' 
}; 

und

const packages: any = { 
    '@ng-bootstrap/ng-bootstrap': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/accordion': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/alert': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/buttons': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/carousel': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/collapse': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/dropdown': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/pagination': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/popover': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/progressbar': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/rating': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/tabset': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/timepicker': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/tooltip': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    '@ng-bootstrap/ng-bootstrap/typeahead': { 
    defaultExtension: 'js', 
    main: 'index.js' 
    } 
}; 

Answer 2

Ja gut @pd farhad beantwortet oben, aber ich möchte eine Erklärung zu, dass man geben,

Eigentlich, wenn Sie einige hinzufügen müssen Bibliotheken von Drittanbietern in eckig CLI dann müssen Sie diese Drittanbieter-Bibliothek Referenz in der eckigen-cli-build.js Datei hinzufügen, weil angular cli alle Dateien aus dem Anbieter-Ordner statt von node_modules Ordner so immer, wenn Sie Eintrag für Ihre Bibliothek (sagen Sie ng-Bootstrap in Ihrem Fall) in CLI-Build-Datei. es wird eine Kopie dieser Bibliothek im Lieferantenordner von angular cli erstellen. welches für unser Projekt verfügbar ist.

so

How should I add the minified .css from my node_modules folder to my angular-cli project?

Sie haben Verweis der Datei/Bibliothek in der system-cli-build.js-Datei, um im Kreditoren Ordner zu erhalten zu geben.

Do I have to add it to angular-cli-build.js

ja, seine obligatorisch, wenn es Bibliothek, aber nicht bei nur einzelne Datei als auch Sie die Datei in den öffentlichen Ordner ablegen können. Es hängt von dir ab.

Do I have to add the typings?

Nicht so viel verpflichtend.

hoffe das klärt mehr!