Base solution for your next web application
Open Closed

Angular refresh page shows blank page #4754


User avatar
0
antonis created

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)
  • User Avatar
    0
    alper created
    Support Team

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

  • User Avatar
    0
    ismcagdas created
    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 ?

  • User Avatar
    0
    antonis created

    No errors.

  • User Avatar
    0
    antonis created

    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])

  • User Avatar
    0
    alper created
    Support Team

    that's normal. One of them is Preflight request

  • User Avatar
    0
    antonis created

    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
    
  • User Avatar
    0
    alper created
    Support Team

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

  • User Avatar
    0
    antonis created

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

  • User Avatar
    0
    ismcagdas created
    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 ?

  • User Avatar
    0
    antonis created

    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

  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    kamlan.naidoo created

    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...

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

    &lt;/rule> &lt;/rules> &lt;/rewrite> &lt;/system.webServer> &lt;/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.