Angular 7 and CDNs

Question

I am writing my first Angular app using Angular 7.

Usually, when writing HTML I make use of CDNs for Bootstrap, fonts etc.

Looking at some tutorials they recommend leaving the default 'index.html' as generated but that seems to be the obvious place to add the CDNs for standard css, js and fonts.

Does Angular have another way of adding the CDNs.

Answer 1

If you want to use CDNs then index.html is the place to do it.

However, the more common approach is to npm install the lib you want to use and then load it from the node_modules folder using angular.json

So, for example, to use bootstrap CSS this way:

npm install --save bootstrap

Then in angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css"
]

Then restart your server. All the bootstrap styles will be bundled up in your app and accessible from any component.

Note in angular.json there are 2 styles array, you want the first one.

When you want to update to a newer version of bootstrap, just npm install the newer version.

The benefit of using node_modules is (1) accessing a resource locally is faster than accessing a resource from the internet (2) once node_modules are installed your app no longer relies on an internet connection to grab the resource.