Come aggiungere ng-bootstrap a un progetto Angular-CLI (versione Broccoli)?

Question

Come aggiungere ng-bootstrap (scritto dal team angular-ui) a un progetto Angular-CLI (Angular2 RC4)?

In particolare:

1. Come devo aggiungere il css minified dalla mia cartella node_modules al mio progetto angolare-cli?
2. Devo aggiungerlo a angular-cli-build.js?
3. Devo aggiungere i tipi?
4. Devo aggiungerlo al /src/system-config.ts

Answer 1

Sì, è necessario aggiungere tutti i file CSS facendo riferimento da vendorNpmFiles in angular-cli-build.js file di prima passare alla directory del progetto e il tipo

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

quindi aprire il angolare-CLI-build.js e aggiungere questa linea

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)' 
] 

ora aprire lo src/system-conf ig.ts, scrivere

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

e

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

Sì ben risposto da @pd Farhad sopra, ma voglio dare qualche spiegazione a quello,

In realtà se si deve aggiungere un po ' librerie di terze parti in angular CLI quindi è necessario aggiungere il riferimento alla libreria di terze parti nel file angular-cli-build.js, perché angular cli ha invece preso tutti i file dalla cartella del fornitore della cartella node_modules così ogni volta che aggiungi una voce per la tua libreria (ad esempio ng-bootstrap nel tuo caso) nel file cli-build. farà una copia di quella libreria nella cartella del venditore di angular cli. che è disponibile per il nostro progetto. così

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

si deve dare di riferimento di quel file/libreria nel file system-cli-build.js al fine di ottenere nella cartella vendor.

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

sì, la sua obbligatoria se si tratta di biblioteca, ma non nel caso di giusta singolo file che si può cadere il file nella cartella pubblica anche. dipende da te.

Do I have to add the typings?

Non molto obbligatorio.

spero che questo chiarisca di più!