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

Question

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

More specifically:

1. How should I add

Answer 1

Yes well answered by @pd farhad above but I want to give some explanation to that one,

Actually if you have to add some third party libraries in angular CLI then you must have to add that third party library reference in the angular-cli-build.js file , because angular cli took all files from the vendor folder instead of node_modules folder so whenever you add entry for your library (say ng-bootstrap in your case) in cli-build file. it will make copy of that library in the vendor folder of angular cli. which is available to our project. so

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

you have to give reference of that file/library in the system-cli-build.js file in order to get in the vendor folder.

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

yes, its compulsory if it is a library, but not in case of a just single file then you can drop that file into public folder too. its depends on you.

Do I have to add the typings?

Not that much compulsory.

hope this clears more!

Answer 2

Yes you have to add all of your css files by referencing from vendorNpmFiles in angular-cli-build.js file First go to the project directory and type

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

then open your 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 your 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'
  }
};