Angular 8 CSS doesn't load on refresh, production build

Question

my index.html looks like this:

<!doctype html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <title>WebsiteName</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- etc -->

The code runs fine when i use "ng build", however when i compile it in production mode (with "ng build --prod") it seems to run fine, but when reloading it disables style.css.

UPDATE: @Elizaveta's answer was correct however the new problem is that

  <link rel="stylesheet" href="styles.d42b9ef58619804546db.css">

is generated by "ng build --prod" like this:

<link rel="stylesheet" href="styles.d42b9ef58619804546db.css"><!doctype html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <title>Nebulónia</title>
  <base href="/">

<!-- etc -->

How do I tell Angular where to generate it?

Here is the full github repo: https://github.com/lori2001/NebuloniaWebsite

should your basehref indeed be /? In other words, is your page visible at mydomain.com or mydomain.com/somepath? — Robin Dijkhof
– Robin Dijkhof, Commented Mar 30, 2021 at 17:46
it has to be "/" because I'm using route parameters for language and it doesn't seem to work otherwise =D. In the past I had "./" and it worked just fine indeed — Lorand
– Lorand, Commented Mar 30, 2021 at 19:28

Elizabeth · Accepted Answer · 2021-03-27 10:05:43Z

4

The problem is that your link to css appears before base href tag.

It should be:

<base href="/">
<link rel="stylesheet" href="styles.d42b9ef58619804546db.css">

For right css processing by browser.

answered Mar 27, 2021 at 10:05

Elizabeth

3132 silver badges7 bronze badges

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

3 Comments

Lorand Over a year ago

I have the style linked in angular.json like this: "styles": ["src/styles.css" [...]], is there a way to still keep it linked in here but move it down in index.html? (because angular automatically adds it for me and I'd prefer to keep it that way if possible)

Elizabeth Over a year ago

That's really weird, I thought, that you put it manually. I've never seen this before. Could you provide whole angular.json?

Lorand Over a year ago

github.com/lori2001/NebuloniaWebsite here's the full repo, could you please take a look at it? hehe :D

David · Accepted Answer · 2021-04-02 15:01:23Z

This is because you need to close your <head> tag in your src/index.html file

<!doctype html>
<html lang="hu">
<head>
 <meta charset="utf-8">
 <title>Nebulónia</title>
 <base href="/">
 <!-- all your meta here -->
 <meta name="theme-color" content="#ff7e00">
 </head> <!-- Make sure to close the head tag -->
 <body>

Explanation

Building in prod mode will use the production configuration from angular.json file, which has extractCss set to true

 "configurations": {
        "production": {
          // ...
          "sourceMap": false,
          "extractCss": true,

This will cause all css styles from your app to be extracted to a styles.xyz.css file, which angular tries to inject just before the head tag is closed. Since the tag it not closed in your index.html file, the build process adds the css link to the top of the file.

In dev mode, extractCSS is set to false (in angular 8), meaning that all styles are combines in a stylesxyz.js file, which is added with a script tag at the end of the body, alongside other js scripts

such a stupid mistake by me :O Thank you for pointing out, it's been like this for a year I think, and I haven't found out until today, I wonder why the browser never showed an error
Browsers do not show errors for malformed html, they just try to fix it

Collectives™ on Stack Overflow

Angular 8 CSS doesn't load on refresh, production build

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related