My Angular 10 App deployed in Azure is loosing its styles when refreshed - css

I have started working on an Angular 10 application using DevExtreme UI Widgets. I deployed a demo version in our Azure Cloud but while I was playing with it, I noticed a strange behavior. It seems that I lose my styles when I refresh.
For example, this is how the login page should be displayed:
If I refresh the URL without entering my login credentials, the page changes and gets displayed like this:
When I login, the bad or good styles are carried over. For example, the landing page should be displayed like this:
If I refresh the screen here, I also see the styles being altered. This is how the landing page gets displayed when the styling is lost:
When I lose the styling if I keep refreshing the page over and over again, eventually I regain the styles and my application starts being displayed as intended.
Any idea what causes the styles to be lost? Any suggestion would be greatly appreciated.
Thanks,
Ed

Regarding the deployment of Angular projects, I have encountered various problems. I am willing to share it with you and hope it will help you.
Troubleshooting steps:
Solution 1.
You can deploy it via Azure Pipelines CI/CD without using the vscode to deploy webapp.
Maybe smth wrong with VS Code plugin, as it is in preview
Solution 2.
Use github for continuous deployment. It is recommended to create a webapp and choose the Linux operating system.
Solution 3.
It is recommended to use FTP to publish the build folder after the project npm build.

This issue was resolved. After further investigation, it turns out that the problem had nothing to do with Azure Cloud deployment. I use DevExtreme UI widgets in my application and the application is based on their Angular Template.
I tried the website using Chrome, Edge and Firefox. The issue described above only happened in Chrome. DevExpress tech support pointed me to this support ticket.
After following the recommendations in the workaround and a redeployment, my app looks fine even in Chrome.
Thanks for everyone trying to help.
Ed

Related

React Native - Dynamic link not persisting through install process

I have a small React Native app for which I have a series of Firebase dynamic links. When the app is installed, the links work perfectly in directing users to the relevant screen defined in the dynamic link
However, if the user does not have the app installed when the dynamic link is followed, the route defined in the dynamic link does not persist.
Is it possible to persist the deep link during the installation process?
I've tried a basic deep link URL like https://fakedomain.org/upload as well as using the ?link=https://fakedomain.org/upload param and neither seem to work.
To answer your question, it is possible to persist the link after installs but it won't be %100 successful because of some limitations on the iOS side. You can check the flowcharts in here
There could be a couple of reasons for it not to work after the app installation. Since no code is provided I'll assume you are listening to the dynamic link with onLink for the app's active state and checking the initial link with getInitialLink when your app is in the quit state.
Persisting the link after app installation involves the clipboard in iOS so make sure the problem is not related to new iOS 16 copy/paste permissions.
Your navigation library might be trying to navigate to the route from the link before your navigation stack is initialized.
If the problem occurs only in one platform it might indicate a problem in your native setup like maybe related to LinkingManager etc.
If you are using a custom domain, you should double check your Associated Domains and AndroidManifest settings.

app css changes are ignored when building project

I'm currently learning Blazor Webassembly. I had issues with my styling and I could not figure it out, why my CSS is wrong all the time. Then randomly after some time passed I saw, that my changes on Client/wwwroot/css/app.css are not picked up. In the browser it is still the same as when I created the project.
What do I need to do?
This Problem can be solved by refreshing the browser with CTRL+F5

No Icons in Kentico Admin Page

I'm very new to Kentico and just started using Kentico 11 for my companies CMS and have run into a lot of issues...most of which I've figured out by trial and error. The issue that comes up most often for me is that each time I create a new website with the wizard in the Admin page, no icons appear in either the dashboard or the applications list or on the top menu bar. It doesn't look like anyone has had this issue before, and I'm curious about how to fix it. I'm using IE 11.
Here is a screenshot:
As you can see from the screenshot, no icons appear anywhere in the dashboard, menu, or menu options. Please help with this issue.
these icons come from the font /App_Themes/Default/Fonts/Core-icons.woff. Check if it is loaded correctly.
A couple things can cause this:
Most common, Kentico caches static objects pretty heavy, so try a simple CTRL + F5 to see if it refreshes things.
If you have not granted access to the user running the website (granted on the app pool), there could be permissions issues with IIS not being able to get to the files it needs. Typically you grant at least read and execute permissions at the /CMS level to the IIS_IUSRS user in the file system on your machine.
Least common, the files weren't added during the install. To check this, run the installer again but in a different location like your Desktop, then spot check/compare a couple directories: /cms/cmsscripts and /cms/app_themes for any differences.
Thank you for all your help. I found the answer and it was very basic and simple. For me the problem was Internet Explorer options not being enabled.
Talking with Kentico support is what tipped me off to this fix:
In IE 11, Go to Internet Options > Security Tab > Click Custom level > Scroll down until you get to Downloads > Under Font download check Enabled.
That was it. Like I said very simple, but on a development server where everything is disabled, it made a huge difference in performance of the Kentico interface.
I hope this helps someone else.

Firebase database empty tab, rules load indefinitely

I just created a firebase project. And the database in the console appears empty. On previous projects, when you clicked on the empty white area, you were able to create database items by hand.
But clicking it doesn't do anything.
The rules tab is loading indefinitely, and i can't type anything.
I'm on Chrome last version, do you encounter such problems by creating new projects?
Here are some screenshots:
Ok, quick answer to my own question as i wasn't able, from my Angular2 App, to interact with database as well via websocket.
I'm working in a company with a (strong) proxy setup file. Disabled it on windows settings and all works now perfectly. Firebase website appears to rely on websockets.
Hope this information can be useful to someone else!

Infinite loop with Safari using Adal JS and ADFS 4.0

I experience problems with Safari when running Adal JS 1.0.13 together with a local ADFS 4.0.
Safari: after a successful redirect back from the ADFS login screen the browser goes into an infinite loop. The sessionStorage is updated approximately 3 times/second with new values each time. If I reload the page later the same loop starts. To reach the login screen I must select “Remove all Website data”. Cookie settings: always accept.
Firefox / Chrome: login works fine and the application runs perfectly. Three cookies are available MSISAuth, MSISAuthenticated & MSISLoopDetectionCookie.
“Keep me signed in” is not selected by the user and the parameter “cacheLocation” is not specified (i.e. use sessionStorage).
Any ideas what causes Safari to behave in this way?
There are various reasons this could be happening and you will need to specifically follow up with adal.js team. See this FAQ from adal.js team.
I recommend collecting adal logs and attaching it to the github issue.
Irrespective of the root cause, the adal.js team recommends two solutions
Specify a different html for the iframe - Gist
Conditional initialization in your main app.js file - Gist
From my experience, the second approach doesn't work for anything but very basic apps. You will need to implement the first solution which takes an iFrame based approach.

Resources