Angular2 - What folder for custom CSS / JS files?

Question

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?

Answer 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.

Answer 2

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.

Answer 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.