-2

Use Case

I have a requirement to show a message in an Angular app to users who are using an unsupported browser. The project is an Angular CLI project. The app is an internal corporate app where we are spoiled with only needing to support Chrome. We do not want to enable the various polyfills to support IE since we will not spend resources to test the app in IE. We do however need to notify the user when they are using an unsupported browser.

Analysis

When a user uses an unsupported browser, any of the JavaScript bundles generated by the CLI (inline, polyfills, and main located at the bottom of the body in index.html) may fail due to depending on features that are not supported in those browsers. That means that the "browser check" code needs to run BEFORE any of the those bundles.

When reviewing index.html of angular.io for inspiration, I have noticed that they have inline scripts in the head for things like Google Analytics. I can for sure follow the same approach and add my "browser check" code inline in index.html. That solution meets the requirement of executing before any of the Angular app bundles.

When adding scripts inline in index.html, we are both polluting the index.html source file, and we are also not getting the benefits of TypeScript, linting, testing, minifaction, etc provided out of the box by the CLI for the app.

The Question

Is it possible to leverage the CLI and have it build a separate bundle from TypeScript (and lint it and test it and minify it) and include it in index.html before any of the other script bundles?

Here is my first attempt using the simple approach of including the JavaScript source file without CLI processing.

Sam Herrmann
  • 6,293
  • 4
  • 31
  • 50
  • in your app.component detect the browser and redirect to an error page https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser – elasticrash Mar 01 '18 at 14:27
  • Adding the browser check code in app.component does not work because app.component will never run in unsupported browsers. I have edited my question to clarify my question. – Sam Herrmann Mar 02 '18 at 16:23

1 Answers1

0

Depending what you mean by unsupported and the level of unsupported. I had an angular apps managing to load the initial basic page in ie10 but then nothing was working onwards. If you mean ie6 7 or 8 thats completely different

You can always place your angular app deeper on your url path and on your root path to have a check that redirects

elasticrash
  • 1,181
  • 1
  • 12
  • 30