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.
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.
You can include CDN in index.html file and another way of including this files is:
npm install bootstrap --save
Then include this in scripts of your angular.json file
scripts [
"./node_modules/bootstrap/dist/css/bootstrap.min.js"
]
Then re-run your app and build your server.
I would simply suggest to use stackblitz.com. They implement the on-the-fly approach to code and run Angular application without the need to have it running locally.
The efficient way of using the alternative of CDN is to use npm install command and it will provide you the functionality better and faster than cdn & also fix your angular-json file.
npm install bootstrap --save