CODEWITHSUNDEEP
angularangular-cli
User1911
User1911

Reputation: 394

index.html not loading local CSS

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: enter image description here

Upvotes: 12

Views: 18824

Answers (3)

Anusha
Anusha

Reputation: 1

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

Upvotes: 0

wolfrevo
wolfrevo

Reputation: 7293

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.

Upvotes: 8

Haseoh
Haseoh

Reputation: 930

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"
]

Upvotes: 13

Related Questions