CODEWITHSUNDEEP
angulartypescriptroutespage-refresh
Lorand
Lorand

Reputation: 311

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

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

Upvotes: 1

Views: 3804

Answers (2)

David
David

Reputation: 34435

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

Upvotes: 2

Elizabeth
Elizabeth

Reputation: 323

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

actual tag placement

It should be:

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

For right css processing by browser.

Upvotes: 4

Related Questions