Angular refresh page shows blank page #4754 | Support Center

antonis created 6 years ago

Hi,

After upgrading to 5.2 a lot of times when pressing F5 or refresh in browser page is not loading. I am using angular 2 + asp.net core. Strange thing I see no errors or 404.

Thanks

12 Answer(s)

0

alper created 6 years ago
Support Team

you might be getting JS errors. See the console of your browser.
0

ismcagdas created 6 years ago
Support Team

@antonis I have tried this with latest version on dev branch but couldn't reproduce the problem.

I have opened the user list page. I hit f5 several times and waited for the page to load before pressing f5 again. Then, I have pressed f5 several times wihtout waiting page to be loaded.

In both cases page is loaded correctly. I have used google chrome as well.

Do you know how can we reproduce this problem ?
0

antonis created 6 years ago

No errors.
0

antonis created 6 years ago

An example is during logout sometimes this happens. What I noticed is the when I click logout I see duplicate requests.

[https://1drv.ms/u/s!Ap6vT6kvVLZ0jGUTGsZ-OzZHBDY0])
0

alper created 6 years ago
Support Team

that's normal. One of them is Preflight request

antonis created 6 years ago

Hi,

I am still experiencing the problem.

I added a console debug log at the AbpHttpInterceptor

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        var interceptObservable = new Subject<HttpEvent<any>>();
        var modifiedRequest = this.normalizeRequestHeaders(request);

        next.handle(modifiedRequest)
            .catch((error: any, caught: Observable<any>) => {
                return this.handleErrorResponse(error, interceptObservable);
            })
            .subscribe((event: HttpEvent<any>) => {
                let resp: any = event;
                if (resp && resp.url)
                {
                    console.debug("Code: " + resp.status + " - " + "Url: " + resp.url);
                }
                else
                {
                    console.debug("Response is null in interceptor");
                }
                this.handleSuccessResponse(event, interceptObservable);
            });

        return interceptObservable;
    }

and whenever the problem occurs I only see the following output in console without any errors but in the network tab of dev tools I can see that more requests are returned from the server with status 200 (GetAll, GetProfilePicture etc...)

Code: 200 - Url: http://localhost:22742/api/services/app/Session/GetCurrentLoginInformations

instead when the app loads without any issues I get:

Code: 200 - Url: http://localhost:22742/api/services/app/Session/GetCurrentLoginInformations
abpHttpInterceptor.ts:248 Code: 200 - Url: http://localhost:22742/api/services/app/Session/GetCurrentLoginInformations
abpHttpInterceptor.ts:248 Code: 200 - Url: http://localhost:22742/api/services/app/Session/GetCurrentLoginInformations
abpHttpInterceptor.ts:248 Code: 200 - Url: http://localhost:22742/api/services/app/Profile/GetProfilePicture
abpHttpInterceptor.ts:248 Code: 200 - Url: http://localhost:22742/api/services/app/UserLink/GetRecentlyUsedLinkedUsers
abpHttpInterceptor.ts:248 Code: 200 - Url: http://localhost:22742/api/services/app/Session/GetCurrentLoginInformations
abpHttpInterceptor.ts:248 Code: 200 - Url: http://localhost:22742/api/services/app/Profile/GetProfilePicture
abpHttpInterceptor.ts:248 Code: 200 - Url: http://localhost:22742/api/services/app/UserLink/GetRecentlyUsedLinkedUsers

0

alper created 6 years ago
Support Team

seems like a browser dependent issue. I hope it's not Internet Explorer
0

antonis created 6 years ago

No. Browser is chrome. I tested it also on firefox and same problem
0

ismcagdas created 6 years ago
Support Team

@antonis what happens when you press F5 again when you see a blank screen ?

Do you see the blank screen again ? Is the user logged out of the system ?
0

antonis created 6 years ago

Hi,

When I press F5 again sometimes it loads sometimes the same problem. The problem occurs both when the user is logged in and logged out

Thanks
0

ismcagdas created 6 years ago
Support Team

@antonis can you create an issue here <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/issues">https://github.com/aspnetzero/aspnet-zero-core/issues</a>. We will investigate it.
0

kamlan.naidoo created 5 years ago

Running locally F5 refresh works fine. On our IIS server it is a problem though... So I had to install Url Rewrite into IIS (from Microsoft site), and add the following web.config file to the Angular site root to get it working...

<configuration> <system.webServer> <rewrite> <rules> <rule name="AngularJS" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions>

</rule> </rules> </rewrite> </system.webServer> </configuration>

On further investigation I found that aspnetzero did provide a similar web.config file to be used. I copied this web.config file from the root to the src folder and in the angular.json file I modified assets: to include src/web.config when I do a build (ng build)...

"assets": [ "src/assets", "src/metronic", "src/web.config", "src/favicon.ico"

There were two occurrences in the angular.json file for this.

"assets": [ "src/assets", "src/web.config", "src/favicon.ico",

So then when you do a 'ng build' from here on forward it will include the web.config file in the dist folder.

Have an answer to this question? Log in and write your answer.