How to prevent Angular application from loading in Index.html

Question

We are trying to make the angular 7 application work only in few specific list of browsers. And if the browser not falls in the list configured, we just need to show a simple HTML page, and stop any further processing. The following code has been added for this, and its working fine in those browsers (eg: IE 8) in which Angular is not supported by default. But when trying to replicate the same behaviour in modern browser (eg:Latest version of Opera) its showing the error page(browser not supported) and proceeding to the application Login page. How to prevent this. (we dont want the navigation to login page in these specific set of browsers). The below code goes in Index.html

 <script>
   //showing relevant code section only

    BrowserDetect.init();
    //supported browser with old version
    if (BrowserDetect.browser == "MS Edge" && BrowserDetect.version < 13 ||
      BrowserDetect.browser == "Chrome" && BrowserDetect.version < 45 ||
      BrowserDetect.browser == "Safari" && BrowserDetect.version < 10 ||
      BrowserDetect.browser == "Firefox" && BrowserDetect.version < 53
    ) {
      document.write("HTML for old version browsers go here");
    }
    //unsupported browser eg:Opera, IE etc..
    else if (BrowserDetect.browser !== "MS Edge" && BrowserDetect.browser !== "Firefox"
      && BrowserDetect.browser !== "Chrome" && BrowserDetect.browser !== "Safari") {
      document.write("HTML for unsupported browser goes here");
    **//issue: In latest version of Opera Browser the unsupported HTML is shown and the application is getting navigated to the Login screen.  How to prevent further angular application execution from this line**
    }
  </script>

I need this to be done, even before angular app initialization. The old browsers wont execute the angular code itself. — amesh
– amesh, Commented Mar 4, 2019 at 9:54

taras-d · Accepted Answer · 2019-03-04 09:51:43Z

2

Check main.ts file. In this file Angular bootstraps application.

It can be changed to something like this:

if (browserOk) {
    platformBrowserDynamic().bootstrapModule(AppModule);
} else {
    // browser unsupported
}

answered Mar 4, 2019 at 9:51

taras-d

1,8371 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

amesh Over a year ago

How can we pass the browserOk variable from index.html to the main.ts file?

taras-d Over a year ago

@amesh browserOk is just example, you can use BrowserDetect instead. Or use window object to hold value true/false window['browserOk'] = true/false.

amesh Over a year ago

I got its a variable given for example, but I'm worried about how we can pass the browser support information to maint.ts, so that we can prevent the app bootstrapping. And we need to synchronize the execution also.. right?

taras-d Over a year ago

Use window object to pass browser information to main.ts. Browser detection code executes before main.ts. I think there should not be a problem with synchronization.

amesh Over a year ago

Thanks for your Kind help. I will check and update this. +1

Collectives™ on Stack Overflow

How to prevent Angular application from loading in Index.html

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related