Geek Answers Handbook

How to add ng-bootstrap to an Angular -CLI project (broccoli version)?

How to add ng-bootstrap (written by the angular -ui command) to an angular -CLI project (Angular2 RC4)?

More specific:

  • How to add miniature .css from my node_modules folder to my angular-cli project?
  • Do I need to add it to angular-cli-build.js?
  • Do I need to add a dash?
  • Should I add it to / src / system -config.ts
+5
source share
2 answers

Yes, you must add all your css files, referring to the vendorNpmFiles file in the angular-cli-build.js First go to the project directory and enter

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

then open angular-cli-build.js and add this line

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

now open src / system-config.ts, write

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

and

 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' } };
+5
source

Yes, @pd farhad answered well above, but I want to give some explanation for this,

In fact, if you need to add some third-party libraries in the angular CLI , you need to add a link to the third-party library in angular-cli-build.js , because angular cli took all the files from the provider folder instead of the node_modules folder, so whenever you add an entry to your library (say ng-bootstrap in your case) in the cli-build file. he will make a copy of this library in the angular cli provider folder. which is available for our project. So

How to add miniature .css from my node_modules folder to my angular-cli project?

you need to specify the link to this file / library in the system-cli-build.js in order to get to the supplier folder.

Should I add it in angular-cli-build.js

yes, it is mandatory if it is a library, but not in the case of only one file, than you can drop this file into a shared folder. it depends on you.

Do I need to add typing?

It's not obligatory.

Hope this clears more!

+2
source

More articles:


All Articles