使用CLI加載角度應用程序后加載樣式

Question

現在，我剛剛開始移植現有的angular應用程序以使用cli。 但是我注意到樣式在我的應用程序開始加載后正在加載。 在加載應用程序期間，我會顯示一個加載gif，它將在頁面中居中。 現在發生的事情是，它在一瞬間出現在頁面的左上方，然后以gif為中心加載樣式，然后加載應用程序。

有沒有什么方法可以模仿這種行為，就像我在加載CSS的html頁面頂部有一個鏈接標記一樣？ 現在，它將我的樣式捆綁在一個js文件中，並加載到body標簽的底部，導致延遲。

我的.angular-cli.json如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "program-quick-view-cli"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "assets/styles/main.scss"
      ],
      "scripts": [
        "assets/js/pdfmake.min.js",
        "assets/js/Treant.js",
        "assets/js/vfs_fonts.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

Answer 1

如果您想快速加載“加載頁面”，我建議您僅將加載頁面的樣式直接注入/嵌入index.html中，這樣在任何時候都不會出現FOUC（未樣式化內容的閃爍）加載過程。 實際上，您甚至可以將加載圖形嵌入CSS中，因此不需要其他請求。

例如（使用SVG）：

<html>
<head>
    <!-- ... -->
    <style>
        @keyframes knock-their-socks-off {
            /*  ... */
        }

        .cool-loader {
            /*  ... */
            animation: knock-their-socks-off 10s infinite;
            background-image: url("data:image/svg+xml;utf8,<svg ...");
            /*  ... */
        }
    </style>
    <!-- ... -->
</head>
<body>
    <!-- ... -->
    <app-root>
        <div class="cool-loader"></div>
    </app-root>
    <link rel="stylesheet" href="/rest-of-site.css" ...>
    <!-- ... -->
</body>
</html>

如果您使用的是GIF，則可以對Base64進行編碼以進行嵌入。 請注意，文件越大，文件越能膨脹index.html。

使用CLI加載角度應用程序后加載樣式

問題描述

1 個解決方案

解決方案1
2 已采納 2017-03-27 18:42:12

使用CLI加載角度應用程序后加載樣式

問題描述

1 個解決方案

解決方案1 2 已采納 2017-03-27 18:42:12

解決方案1
2 已采納 2017-03-27 18:42:12