How to add custom css and js to angular 4

Question

In angular 2, I could just add them in the index.html like this:

<link rel="stylesheet" href="css/mycss.css">

But in angular 4 it has to be added to the angular-cli.json file in the styles and script array section.

In my situation they don't seem to be loaded at all. No error but when I view the app in the browser, I know the styles didn't load. When I add the styles and js to the index.html file too it doesn't get loaded, I get a 404 in the console.

How do I fix this? Below is my version of Angular cli: @angular/cli : 1.0.2 Node : 6.9.2

Answer 1

If you are using angular cli then go to your .angular-cli.json and then you can get "styles":[ ] as well "scripts":[ ] inside these you can add your css files and js files

 "styles": [
            yourfirst-css-file , //comma (,)is important
            your-second-css-file
          ],

Eg:-

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

and 404 error means that the file is not found.Try and append the complete "url" folder(src).