我有一个静态web应用程序托管在netflix为SSR我用Angular Universal开发了它。.
为了更好的用户体验，我想添加一个加载旋转器在下载所有资源和所有组件(至少是主页)准备就绪之前。软件没有API，所以我不认为使用
interceptor来监视请求会有帮助。
我已经写了一个覆盖组件和一个服务注入到我的页面，但是有什么我需要做的app.server.module.ts文件或没有?
正如lorenzochaudessolle在这里的评论:https://github.com/angular/universal/issues/1598#issuecomment-612630028
通过显示静态部分和隐藏加载部分完成。
index . html
<body>
<div id="loader">
<!-- Here is your code (spinner, text , etc...) -->
</div>
<app-root>
</app-root>
</body>
app.component.ts
constructor(@Inject(PLATFORM_ID) private platformId: Object, private renderer: Renderer2) { }
ngAfterViewInit(): void {
if (isPlatformBrowser(this.platformId)) {
let loader = this.renderer.selectRootElement('#loader');
if (loader.style.display != "none") loader.style.display = "none"; //hide loader
console.log("test view init")
}
}
你可以点击上面的链接了解更多细节。
你可以添加一个div到index.html，其中包含一个img与base64数据src与内联的样式，离开它后面的应用程序/页面，当他们加载:
<div style="...">
<img src="data:image/gif;base64,xxxx..
也许有更好的方法，但这是一个选项