How to configure css and js paths in ng

How to configure CSS and JS paths in ng

In Angular, We often use external CSS and JavaScript files to add styling and functionality to our applications. In these cases, we need to configure Angular to ensure it can correctly locate these files. In this article, we’ll detail how to configure the paths to CSS and JavaScript files in Angular applications.

Configuring CSS File Paths

In Angular, we use the angular.json file to configure the path to our application’s style files. Find the angular.json file in the project root directory, open it, and locate the styles array. In the styles array, we can add the paths to our external CSS files, and Angular will automatically include them.

For example, we have an external CSS file styles.css is placed in the assets folder under the src directory. We can configure the angular.json file as follows:

"styles": [
"src/styles.css is placed in the assets folder under the src directory. Tutorial">css", 
"src/assets/styles.css" 
]

In the above configuration, we added the src/assets/styles.css file to the application’s style file path. When we run the application, Angular will automatically import this external CSS file.

Configuring JavaScript File Paths

For JavaScript files, we can use the scripts array in the angular.json file to configure it. Again, find the angular.json file in the project root directory, open it, and find the scripts array. In the scripts array, we can add the paths to external JavaScript files, and Angular will automatically import them.

For example, if we have an external JavaScript file, app.js, located in the assets folder within the src directory, we can configure the angular.json file as follows:

"scripts": [
"src/app.js",
"src/assets/app.js"
]

In the above configuration, we add the src/assets/app.js file to the application’s JavaScript file path. Angular will automatically import this external JavaScript file when we run the application.

Sample Code

To demonstrate how to configure the paths for CSS and JavaScript files, we can create a simple Angular application and add an external CSS file and an external JavaScript file.

First, create a new Angular application:

ng new my-app

Change to the application directory and install Bootstrap and jQuery:

cd my-app 
npm install bootstrap jquery

Create an external CSS file styles.css in the assets folder under the src directory and add some styles:

/* styles.css */ 
body { 
font-family: Arial, sans-serif; 
}

Create an external JavaScript file app.js in the assets folder under the src directory and add some JavaScript code:

// app.js 
$(document).ready(function() { 
console.log("Hello, world!"); 
});

Configure the styles and scripts arrays in the angular.json file:

"styles": [ 
"src/styles.css", 
"src/assets/styles.css", 
"node_modules/bootstrap/dist/css/bootstrap.min.css" 
], 
"scripts": [ 
"node_modules/jquery/dist/jquery.min.js", 
"node_modules/bootstrap/dist/js/bootstrap.min.js", 
"src/app.js", 
"src/assets/app.js" 
]

Run the application:

ng serve --open

Open the application in a browser and you’ll see that the styles have taken effect and the console outputs Hello, world!, indicating that the external CSS and JavaScript file paths have been configured successfully.

In summary, by configuring the styles and scripts arrays in the angular.json file, we can easily import external CSS and JavaScript files into our Angular application to add style and functionality to the application.