Menu
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:
945
Make sure that you add the rel attribute to the link tag When you add an external CSS file to your HTML document, you need to add the rel="stylesheet" attribute to the <link> tag to make it work. If you omit the rel attribute from the <link> tag then the style won't be applied to the page.
There are three different ways to link CSS to HTML based on three different types of CSS styles: Inline – uses the style attribute inside an HTML element. Internal – written in the <head> section of an HTML file. External – links an HTML document to an external CSS file.
A site may not load the CSS file due to browser caching. It's the most common cause and is the easiest to fix because you only need to remove the cache from your browser. Yet, there are times when an invalid line of code or conflict with other themes and plugins can also make the CSS file unreadable.
If you are adding/modifying in-line CSS or JavaScript and not seeing the changes reflected in the HTML source, the page is likely being cached. The solution may be to purge the WordPress object cache, which stores our page caching (Batcache) renders.
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"
]
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
