加载页面时会短暂显示html_Html_Angular_Loading_Ngcloak

加载页面时会短暂显示html

html angular

加载页面时会短暂显示html,html,angular,loading,ngcloak,Html,Angular,Loading,Ngcloak,在我的Angular应用程序中，我的菜单组件html代码在加载页面时短暂显示。即使我用display none css隐藏了menu html根元素，当页面开始加载时，html仍然会显示出来。我已经读了很多关于ng斗篷（）的书，但似乎我没有ng斗篷所以我不知道如何防止这种不愉快的影响 Angular 4是否对ng斗篷有等效指令？如何在不加载未设置样式的html的情况下正确显示页面？我认为这种行为是不可避免的。你能做的最好的事情就是尽可能地加快速度。使用最新版本，AOT和延迟加载帮助很大。

在我的Angular应用程序中，我的菜单组件html代码在加载页面时短暂显示。即使我用display none css隐藏了menu html根元素，当页面开始加载时，html仍然会显示出来。我已经读了很多关于ng斗篷（）的书，但似乎我没有ng斗篷

所以我不知道如何防止这种不愉快的影响

Angular 4是否对ng斗篷有等效指令？

如何在不加载未设置样式的html的情况下正确显示页面？

我认为这种行为是不可避免的。你能做的最好的事情就是尽可能地加快速度。使用最新版本，AOT和延迟加载帮助很大。

或者，您可以向

index.html

添加一些css。index.html文件不应包含任何特定于应用程序的html代码。但是只有一些头和应用程序的根标记。它可能包含一个占位符文本，如根标记中的“加载”

应用程序的所有html代码都应位于app.component.html和/或其他组件中

@angular/cli生成一个index.html“模板”文件，如下所示：

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
       <app-root>Loading...</app-root>
    </body>
</html>


...
加载。。。

浏览器立即显示“正在加载…”文本。初始化Angular后，它将替换为实际应用程序。要获得白色页面，只需删除文本。

您可以尝试以下内容：

（在我看来，最好的解决方案）您可以使用Angular Universal进行服务器端渲染。工作流程是：

用户将请求发送到
```
example.com
```
服务器没有使用纯HTML（上面的示例）进行响应，而是在服务器端运行Angular并呈现输出HTML
此HTML（以及指向已编译应用程序的
标记）将发送到浏览器用户
首先，用户看到由浏览器格式化的HTML+CSS。然后浏览器启动*.js文件，过一会儿，用“单页应用”替换“静态页面”
Angular可以处理“静态页面”（在JavaScript启动之前）上完成的所有操作，这要归功于
```
BrowserModule.withServerTransition（）；
```

您可以从Universal进一步，将您的Angular Universal应用程序作为一个渐进式Web应用程序（PWA）提供服务

再进一步，从谷歌缓存中引入加速移动页面（AMP）

在index.html中，除了应用程序

root

节点外，您不应放置任何内容：


...
加载。。。

这是一个功能，而不是一个bug

您可以做以下三件事中的一件：

让UAs尽快获得信息，并假设人们可以知道什么时候东西已满载，或者

让人们等待信息，并在信息全部加载后才显示给他们

某种荒谬的灰色区域独角兽实现，确保在显示页面之前加载页面的一部分，而不必为其他部分费心

从历史上看，#2一直是最受嘲笑的方法，尤其是当这么多人想要这样做的时候。我建议不要追求它。

我会同意@HendrikBrummermann的答案：放置一个“加载…”标签

从您的评论中，“…哪个组件包括标题…显示标题的未设置样式的html”，我相信您已经有了答案：没有加载CSS可以设置标题html的样式
亨德里克的回答将标签保持在最低限度，因此这种效果并不明显
如果您真的需要立即设置标题样式，我担心您需要使用内联样式（并且没有图像或字体-这些也不会加载）。将其保持在最低限度即可：

<!doctype html> <html> <head> ... <style> ... </style> </head> <body> <app-root>(styled header)</app-root> </body> </html>

... ... （样式化标题）
加载后，您可以删除占位符
您还可以尝试（但这很麻烦，也很难维护）使用两个“加载器”的增量方法：非常非常小的一个，几乎不需要CSS/图像，然后一旦字体和其他非常少的基本资源被加载，你就可以用一个简单的动画来替换它，从那里你加载所有其余的并激活完整的Angular应用程序

还有一些“packager”实用程序可以将大多数HTML、CSS和JS压缩到一个小型SPA包中；其中一些（很抱歉，我看到有几个使用过，但我自己从未使用过，也无法引用）同样提供一个最小的加载程序，如上所述。这个可能会帮你做一些维护，也许值得一试。我知道这一点，因为我的一个同事在一个项目中不得不用一个HTML5加载程序替换一个Flash“Please wait”（请等待）加载程序（这不是一个角度项目，但我认为这并不重要）.
Hi Hendrik.My index.html不包含任何特定的html代码。它只包含包含标题的应用程序根标记。因此，加载…会显示出来。就在标题的未设置样式的html显示出来之后。这就是问题所在。我想要一个更满意的答案，因此我会增加您的问题。您知道，您描述了什么bing被称为未格式化内容的FOUC-Flash。