Angular 8 CSS 刷新时未加载，生产构建

Question

我的 index.html 看起来像这样：

<!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 -->

当我使用“ng build”时代码运行很好，但是当我在生产模式下编译它时（使用“ng build --prod”）似乎运行很好，但是在重新加载时它会禁用 style.css.

更新：@Elizaveta 的回答是正确的，但是新问题是

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

由“ng build --prod”生成，如下所示：

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

<!-- etc -->

如何告诉 Angular 在何处生成它？

这是完整的 github 存储库：https://github.com/lori2001/NebuloniaWebsite

Answer 1

问题是您的 link 到 css 出现在基本 href 标签之前。

应该是：

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

右css浏览器处理。

Answer 2

这是因为您需要关闭 src/index.html 文件中的 <head> 标签

<!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>

说明

在 prod 模式下构建将使用 angular.json 文件中的 production 配置，其中 extractCss 设置为 true

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

这将导致您的应用程序中的所有 css 样式被提取到 styles.xyz.css 文件中，angular 试图在 head 标签关闭之前注入该文件。由于标签未在您的 index.html 文件中关闭，构建过程将 css link 添加到文件顶部。

在dev模式下，extractCSS设置为false（在angular8中），意思是所有的样式都合并在一个stylesxyz.js文件中，这个文件加上一个script标签在主体的末尾，与其他 js 脚本一起

Angular 8 CSS 刷新时未加载，生产构建

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

routes

page-refresh

typescript

angular