刷新后,我在Azure中部署的Angular 10 App失去了样式

问题描述

我已经开始使用DevExtreme UI Widgets开发Angular 10应用程序。我在Azure云中部署了一个演示版本,但是当我玩它时,我注意到一个奇怪的行为。刷新时似乎失去了样式。 例如,这是应该显示登录页面的方式:

Good Login Page

如果我在没有输入登录凭据的情况下刷新URL,页面将更改并显示如下:

Bad Login Page

登录时,不良样式或好样式都会保留下来。例如,登录页面显示如下:

Good landing page

如果我在这里刷新屏幕,我还会看到样式被更改。这是样式丢失时显示登录页面的方式:

Bad landing page

当我丢失样式时,如果不断重复刷新页面,最终我会重新获得样式,并且应用程序将按预期显示

任何想法会导致样式丢失吗?任何建议将不胜感激。

谢谢, 埃德

解决方法

关于Angular项目的部署,我遇到了各种问题。我愿意与您分享,希望对您有所帮助。

故障排除步骤:

解决方案1。

您可以通过Azure Pipelines CI / CD部署它,而无需使用vscode部署Web应用。

Maybe smth wrong with VS Code plugin,as it is in preview

解决方案2。

使用github进行连续部署。建议创建一个webapp并选择Linux操作系统。

解决方案3。

建议使用FTP在项目_grid.MasterTableView.Style["font-size"] = "10px"; 之后发布build文件夹。

,

此问题已解决。经过进一步调查,结果表明该问题与Azure云部署无关。我在应用程序中使用DevExtreme UI小部件,该应用程序基于它们的Angular Template

我尝试使用Chrome,Edge和Firefox浏览该网站。上述问题仅在Chrome中发生。 DevExpress技术支持将我指向this support ticket

遵循变通办法中的建议并重新部署后,即使在Chrome中,我的应用程序也看起来不错。

感谢所有尝试提供帮助的人。 埃德