How to add externals library into your Angular Project?

August 27, 2018

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.


Originally published at danywalls.com on August 27, 2018.

Dany Paredes

Hi, I'm Dany Paredes, few years ago I was working with .NET, but in my last years I have been focusing in Javascript using Vue , Angular or React. You can read more in Twitter or Github.