How to add externals library into your Angular Project?

Sometimes We need to add externals libraries like Bootstrap or Bulmacss into our Angular 2/6 Applications. The easiest way to handle this is passing the responsibility to Webpack.

Angular CLI allows configuring easily the angular.json files to handle externals libraries, for example into our next case we will install Bootstrap.

npm i bootstrap --save

To notify Webpack to handle the Bootstrap library, we edit the angular.json and includes the paths.

"styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

DONE! Now you move all responsibility to Angular-CLI and Webpack to handle all libraries registered in the angular.json.