Skip to main content
Flox Blog Beginner's Guide for Web Developers. 60% Off in Website Design & Development click here.

How to add external CSS & JavaScript file in angular latest version?

In this article we will discuss a most popular and common question of angular developers is:

How to add external CSS & JavaScript file in angular project?

This problem in comes after angular js next version angular 2 and the upper version. Because in angular 2 google changed all the coding structure and it’s completely new to the angular js developers(Front-End Developer).

So, in this tutorial we will discuss a the most easiest way to implement external css and js in your angular project.

Then first open your angular project in the editor called “Visual Studio Code“. It’s look like the below image.

How to add external CSS & JavaScript file in angular latest version

Adding external CSS in Angular Project.

First we will implement CSS file in your project.

Go to your project folder > Click on src folder > Click on assets folder > Create a folder called css > and paste your css files here.

See Image Below:

The very easy and first to do way is go to main css file called styles.css in the src root floder. This styles.css file is globally declared file. Here you will import your all css links like below css codes. These are my css files to line in my project.

/* You can add global styles to this file, and also import other style files */
@import './assets/css/bootstrap.min.css';
@import './assets/css/style.css';
@import './assets/css/colors.css';
@import './assets/css/versions.css';
@import './assets/css/responsive.css';
@import './assets/css/custom.css';

This way your css files are work on your angular project.

 

Second way of Adding external CSS in Angular Project.

Go to your root path of angular project. Find the fine name as angular.json. Go through the line and find code “styles”: [] and add your css path like this.

"styles": [
  "src/styles.css",
  "src/assets/css/bootstrap.min.css",
  "src/assets/css/style.css",
  "src/assets/css/colors.css",
  "src/assets/css/versions.css",
  "src/assets/css/responsive.css",
  "src/assets/css/custom.css"
],

Note when you add your path and save this file, then it’s not working or nothing happen in your project. So close the server in your terminal Ctrl+C (Shortcode). Then restart the project.

ng s -o

Now you will see the result. It’s work fine. Now work on JavaScript.

Adding external JavaScript in Angular Project.

Go to your root path of angular project. Find the fine name as angular.json. Go through the line and find code “scripts”: [] and add your JavaScript path like this.

"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "src/assets/js/animate.js",
  "src/assets/js/custom.js",
  "src/assets/js/hoverdir.js",
  "src/assets/js/jquery.prettyPhoto.js",
  "src/assets/js/jquery.vide.js",
  "src/assets/js/map.js",
  "src/assets/js/mapsed.js",
  "src/assets/js/modernizer.js",
  "src/assets/js/owl.carousel.js",
  "src/assets/js/portfolio.js",
  "src/assets/js/retina.js",
  "src/assets/js/scroll.js"
]

Note when you add your js path and save this file, then it’s not working or nothing happen in your project. So close the server in your terminal Ctrl+C (Shortcode). Then restart the project.

Now you will see the js result. It’s work fine. If see some JavaScript error then you will define in .ts file. This is the solution of add external CSS and JavaScript file in angular. We will discuss this topic in another tutorial.

 

Leave a Reply

avatar
  Subscribe  
Notify of
F