5

I'm adding existing .js and .css files to an Angular 4 app which uses angular-cli 1.0.6. Until a recent upgrade, I was simply referencing them in index.html--I know that's 'wrong' but it worked for my current needs.

After a recent update, I'm getting 404s for everything I've tried. I have managed to add the JavaScript file by adding it to angular-cli.json and then importing it into a component. That's working, but the same isn't working for the .css file.

I've tried it in index.html: <link rel="stylesheet" type="text/css" href="/scripts/test.css"> I've tried in the component's template: <link rel="stylesheet" type="text/css" href="../../../app/scripts/test.css"> And I've tried adding it the to styles in the component: styleUrls: ['../edit.scss', '../../scripts/test.css'],

I'm getting 404s for all of them even though the paths are valid (I can follow them in the editor).

What's the correct way to do this?

0

2 Answers 2

8

Go to your angular-cli.json file and there is a property of arrays and you can add your css file in that place, just like I did with bootsrap.min.css.

enter image description here

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

1 Comment

Thx for the answer, but I tried that. As I mentioned in the question adding it in angular-cli.json didn't help. But to be clear, after I've added it there, how do I include in a certain component template but not globally?
7

An angular-cli project contains by default a styles.css file under the src folder of the project (myAngularCliProjectName/src/styles.css).
In this file you'll be able to add global styles and also import other style files.
There's no need at all to link them from the index.html file.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.