In this article we will discuss a most popular and common question of angular developers is:
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.
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
"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.