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

Have you restart your server once you've added the css files to the styles array? Try to break your server and re-run ng serve — Dieterg
– Dieterg, Commented May 29, 2017 at 12:57
you still can put them as link tags. Angular-cli creates a assets folder, put them in and reference them in your index.html file (under src="assets/yourPath.css") — user4676340
– user4676340, Commented May 29, 2017 at 13:24

Asumoon · Accepted Answer · 2017-05-29 13:22:04Z

14

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

answered May 29, 2017 at 13:22

Asumoon

3432 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

How to add custom css and js to angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related