CODEWITHSUNDEEP
angularcdnangular7
BENBUN Coder
BENBUN Coder

Reputation: 4881

Angular 7 and CDNs

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.

Upvotes: 4

Views: 6473

Answers (4)

Ayyaz Khan
Ayyaz Khan

Reputation: 25

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

Upvotes: 1

Shilpa Soni
Shilpa Soni

Reputation: 306

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.

Upvotes: 4

Daniel
Daniel

Reputation: 124

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.

Upvotes: 3

danday74
danday74

Reputation: 57016

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.

Upvotes: 6

Related Questions