0

I have to include a set of CSS and JS files in my angular2 application.

What is the correct folder in order to have them included when I do the build?

Should I have to put them inside SRC\Assets or under SRC\myFolder ?

Once defined it, how do I have to include them inside my app.component.html and how to configure <base href="/"> properly?

Thanks to support

Improve this question
3
  • 1
    put them in your assets. Commented Jun 8, 2017 at 14:20
  • 1
    What are you using for building the application? Webpack, perhaps? You could have a look for best practices at the AngularClass/angular-starter repo in github. Will give you some clues on how things are being done right now :) Commented Jun 8, 2017 at 14:22
  • I just do "ng build --prod" Commented Jun 8, 2017 at 14:23

3 Answers 3

Reset to default
3

If your using the Angular CLI then you can put them anywhere, but I would suggest in a logical place that makes sense in your src/assets folder.

From there add entries for the js and css files in your angular.cli.json file.

there is a scripts array and a styles array under each object/app in the apps node.

look for something like ...

apps: [
 {
   ...
   "styles": [ "assets/styles/myCustomStyles.css" ],
   "scripts": [ "assets/js/dragevents.js" ]
 }
]

If done correctly the cli will automatically add them to your index when it builds.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I am using webpack and in my application, I have placed them in src/assets folder now I can just use it like this

<img class="photo-icon" src="/assets/img/user-default.png">

You can make separate folders for javascript, images and stylesheets etc. in your assets folder and append in the path.

Improve this answer

6 Comments

Abdul under assets folder, the CSS/JS are rendered properly but the image no. Can u help me ?
Is it giving 404 error ? Can you see the image if you open the image url in new window ?
No I cant see the image... I try to access it by direct url "localhost:4200/assets/distAdminLte2/img/icon-user.png" and I can't reach her, if I instead I try to load a css like "localhost:4200/assets/distAdminLte2/css/AdminLTE.min.css" , it works
using <img src="src/assets/distAdminLte2/img/icon-user.png"> it works but I think I will face some problem once I build the solution for production...
I have used it in production too with java spring and it works without any problem.
|
0

If you are asking where to put the styles the official angular style guide says:

https://angular.io/styleguide#!#05-04

it is a recommended way, but as the comment bellow you can put them in the order that makes better sense for you.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.