index.html not loading local CSS

Question

I have lately started using AngularCLI. I had transferred all my files from Angular2 to AngularCLI project.

But It is not loading some local css file but it is loading other css files?

Current Directory is:

-src
--index
--styles.css
--app
---angular2-fullcalendar
----fullcalendar.min.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cudyangularcli</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="../src/app/angular2-fullcalendar/fullcalendar.min.css" >
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

error is:

from angular-cli readme: "You can add more global styles via the apps[0].styles property in angular-cli.json." npmjs.com/package/angular-cli#global-styles — n00dl3
– n00dl3, Commented May 23, 2017 at 8:29
I think the path is wrong, when you run your app the root of your app is set as src folder, in this case you should redirect to /app/.... — hakany
– hakany, Commented May 23, 2017 at 8:31

Haseoh · Accepted Answer · 2017-05-23 08:29:40Z

13

It's not loading, because you need to use angular-cli.json file to add css files into project, not the index.html. To do so, simply open angular-cli-json and add css files into styles:

"styles": [
        "styles.css",
        "another-styles.css"
]

answered May 23, 2017 at 8:29

Haseoh

9284 gold badges18 silver badges38 bronze badges

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

2 Comments

Haseoh Over a year ago

Make sure to delete css links from index.html and check if you path to certain .css files are correct.

Ganesh Kodiganti Over a year ago

referring in index.html works for external css files (cdn etc.) internal files have to be mentioned in angular.json (config file)

wolfrevo · Accepted Answer · 2017-05-23 08:58:13Z

8

create directory src/assets/css and put your file fullcalendar.min.css in src/assets/css.

Point to it with:

<link rel="stylesheet" type="text/css" href="assets/css/fullcalendar.min.css">

angular-cli build command will copy the directory assets and its contents to dist/assets as stated in .angular-cli.json:

"apps": [{"assets": ["assets"] ...} ...]

I use following directory structure:

src/assets/css
src/assets/js
src/assets/icons
...

You can also set "apps": [{"styles": ["angular2-fullcalendar/fullcalendar.min.css"] ...} ...] in .angular-cli.json as @Haseoh mentioned.

The difference is that assets will copy the css file as is to the dist directory. styles will bundle the contents of the css file to the file styles.bundle.js.

edited May 23, 2017 at 8:58

answered May 23, 2017 at 8:39

wolfrevo

7,3792 gold badges34 silver badges46 bronze badges

Comments

Anusha · Accepted Answer · 2017-09-27 06:23:47Z

0

Basically by default the path for styles.css is specified in angular-cli.json.So you don't need to call inside index.html.It will load automatically. "styles": ["styles.css",].If you have any other css files.specify this here.And add path as href="../path".

answered Sep 27, 2017 at 6:23

Anusha

11 bronze badge

Collectives™ on Stack Overflow

index.html not loading local CSS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related